Incorrect containment when using both draggable and resizable

While trying to implement an image cropping application, I came across this bug.

With

draggable

and

resizable

applied to a target element (with containment set to its parent container), the target element can only be resized to a maximum of 8 pixels less than the width and height of its container. This happens to be exactly the default margin of the HTML document. An example is as follows:

HTML/CSS:

<div id="container" style="width: 800px; height: 600px; background: red;">
    <div id="target" style="height: 100px; width: 100px; background: green;"></div>
</div>

JavaScript:

$('#target').draggable({containment: 'parent'});
$('#target').resizable({containment: 'parent'});

In this example, the target can only be resized to a maximum of 792 × 592 pixels. The mismatched containment is even worse if there are elements with before the container element (e.g.

<h1>

).

As a quick workaround, I found that adding a

position: absolute

style to the container element fixes the problem. I have tested this in:

• Firefox 3.5 (Win XP + Mac OS X 10.5.7)
• Safari 4.0.1 (5530.18)
• Google Chrome 2.0.172.33
• Internet Explorer 8.