#3053 closed bug (fixed)
when resizing a image a row of pixels can disappear
Reported by: | 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
Milestone: | → TDB |
---|
comment:2 Changed 15 years ago by
Milestone: | TBD → 1.6 |
---|
comment:3 Changed 15 years ago by
comment:4 follow-up: 5 Changed 15 years ago by
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 Changed 15 years ago by
Or use "self" rathet than "this":
self.helper.height(self.size.height); self.helper.width(self.size.width);
it works well with this fix ;).
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.