#3053 closed bug (fixed)

Opened July 01, 2008 02:36PM UTC

Closed March 02, 2009 10:39AM UTC

Last modified October 18, 2012 12:21AM UTC

when resizing a image a row of pixels can disappear

Reported by: arjen.vellinga@gmail.com 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

Attachments (0)
Change History (8)

Changed August 16, 2008 08:01PM UTC by Cloudream comment:1

milestone: → TDB

Changed January 02, 2009 02:53PM UTC by scottgonzalez comment:2

milestone: TBD → 1.6

Changed February 26, 2009 07:02PM UTC by raziel057 comment:3

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.

Changed February 26, 2009 08:44PM UTC by raziel057 comment:4

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);

Changed February 26, 2009 08:49PM UTC by raziel057 comment:5

Or use "self" rathet than "this":

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

it works well with this fix ;).

Changed March 02, 2009 10:39AM UTC by rdworth comment:6

resolution: → fixed
status: new → closed

Fixed in r2164

Changed October 18, 2012 12:21AM UTC by mikesherov comment:8

#3776 is a duplicate of this ticket.