Opened 15 years ago

Closed 15 years ago

Last modified 11 years ago

#3053 closed bug (fixed)

when resizing a image a row of pixels can disappear

Reported by: arjen.vellinga@… Owned by: eduardo
Priority: minor Milestone: 1.7
Component: ui.resizable Version: 1.5.1
Keywords: resizable image borders Cc:
Blocked by: Blocking:

Description

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

Change History (8)

comment:1 Changed 15 years ago by Cloudream

Milestone: TDB

comment:2 Changed 15 years ago by Scott González

Milestone: TBD1.6

comment:3 in reply to:  description Changed 15 years ago by 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.

comment:4 Changed 15 years ago by 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);

comment:5 in reply to:  4 Changed 15 years ago by 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 ;).

comment:6 Changed 15 years ago by rdworth

Resolution: fixed
Status: newclosed

Fixed in r2164

comment:8 Changed 11 years ago by mikesherov

#3776 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.