jQuery UI #4554

http://bugs.jqueryui.com/ticket/4554

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/4554">jQuery UI #4554</a> - <code>resizable</code> image shakes during resize.  To recreate this resize the image at the northwest or northeast.    Resizing to the south and east does not recreate the issue.</p>

<div id="resizeMe"></div>

CSS

body { padding: 20px; }
p { line-height: 1.5; }

#resizeMe {
    position: absolute;
    width: 200px;
    height: 300px;
    left: 240px;
    top: 200px;
    background-image: url(http://placekitten.com/700/700);
    background-position: -190px -20px;
    background-repeat: no-repeat;
    border: dotted 1px red;
}

JavaScript

$('#resizeMe').resizable({
    handles: 'all',
    resize : function(event, ui) {
        this.style.backgroundPosition = '-' 
            + (ui.position.left - 50) + 'px -' 
            + (ui.position.top - 50) + 'px';   
    }
});