when resizing a image a row of pixels can disappear

[[email protected]…]

Im resizing a image with:

handles: "all", aspectRatio: true, transparent: true, ghost: true

upon resizing the right or bottom part (0 to 4 pixels) of the image disappears

this happens in FF 2.0.0.9 and in IE6

my guess is that it has something to do with the time needed to calculate the new image because when i keep my mouse button pressed for a few extra seconds the image comes out right

[raziel057]

I tested with FF3.0.6 and it's the same. I noticed the problem appears only when "ghost" is set to true.

In fact, more resizing is faster, the problem is increased. The image can be really cropped.

I think there is this._proportionallyResize() isn't launch correctly at mouse stop. I am going to try to look at that closely.

[raziel057]

I found the problem and I propose a bug fix. In fact, helper is used in _proportionallyResize function to modified elements contained in resizable div.

I taced the width/height of helper compared to self object:

START _mouseDrag
_mouseDrag helper WIDTH: 583
_mouseDrag helper HEIGHT: 318
END _mouseDrag
START _mouseDrag
_mouseDrag helper WIDTH: 577
_mouseDrag helper HEIGHT: 312
END _mouseDrag
START _mouseStop
_mouseStop self WIDTH: 347
_mouseStop self HEIGHT: 188
START _proportionallyResize
_proportionallyResize helper WIDTH: 577
_proportionallyResize helper HEIGHT: 312
END _proportionallyResize
END _mouseStop

We can notice helper is not synchronized to self in _mouseStop function, so the element in resizable get dimension of helper which have been modified only in _mouseDrag function:

WIDTH => 577 rather than 347
HEIGHT => 312 rather than 188

So, the element contained in the div is largest than the parent div. If element is an image, it is cropped. It's the same when the user enlarge the resizable div (image is smaller than the parent container).

In order to correct this problem I propose to synchronize helper dimension with "self" in _mouseStop function by adding the following lines just before to call "this._proportionallyResize();"

this.helper.height(self.size.height);
this.helper.width(self.size.width);

[raziel057]

Or use "self" rathet than "this":

self.helper.height(self.size.height);
self.helper.width(self.size.width);

it works well with this fix ;).

[rdworth]

Fixed in r2164

[rdworth]

See visual test ​http://jquery-ui.googlecode.com/svn/trunk/tests/visual/resizable/resizable_ticket_3053.html

[mikesherov]

#3776 is a duplicate of this ticket.