Ticket #3053 (closed bug: fixed)

Opened 6 years ago

Last modified 21 months ago

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:
Blocking: Blocked by:

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

comment:1 Changed 6 years ago by Cloudream

  • Milestone set to TDB

comment:2 Changed 6 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.6

comment:3 in reply to: ↑ description Changed 5 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 follow-up: ↓ 5 Changed 5 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 5 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 5 years ago by rdworth

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in r2164

comment:8 Changed 21 months ago by mikesherov

#3776 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.