#9613 closed bug (duplicate)

Opened October 22, 2013 05:27PM UTC

Closed October 23, 2013 12:59PM UTC

Last modified October 23, 2013 01:44PM UTC

Difference in ui.position depending on animate setting

Reported by:	OliverSalzburg	Owned by:	OliverSalzburg
Priority:	minor	Milestone:	none
Component:	ui.resizable	Version:	1.10.3
Keywords:		Cc:
Blocked by:		Blocking:

Description

I am working on a component where you can move markers on a grid. The markers can be dragged and dropped inside that grid and they can be horizontally resized.

When resizing a marker, I noticed that it would also change it's position slightly. This only seemed to happen when enabling animation for the resize operation.

While investigating this issue, I came across some behavior that seemed weird to me. You can observe this in this fiddle: http://jsfiddle.net/qjpKC/3/

The fiddle will create a single marker on an imaginary grid. When, for example, increasing the width of the marker by one unit, the output in the console should look like:

start Object {left: 94, top: 75}
resize Object {left: 94, top: 75}
stop Object {left: 66, top: 55}

However, when changing the animate property in the resizable call to false, the values in the log entry corresponding to the stop event have changed:

start Object {left: 66, top: 55}
resize Object {left: 66, top: 55}
stop Object {left: 66, top: 55}

Attachments (0)

Change History (5)

Changed October 22, 2013 05:33PM UTC by scottgonzalez comment:1

description:	I am working on a component where you can move markers on a grid. The markers can be dragged and dropped inside that grid and they can be horizontally resized. \ \ [[Image(http://i.imgur.com/josMaRC.png)]] \ \ When resizing a marker, I noticed that it would also change it's position slightly. This only seemed to happen when enabling animation for the resize operation. \ \ While investigating this issue, I came across some behavior that seemed weird to me. You can observe this in this fiddle: http://jsfiddle.net/qjpKC/3/ \ \ The fiddle will create a single marker on an imaginary grid. When, for example, increasing the width of the marker by one unit, the output in the console should look like: \ \ {{{ \ start Object {left: 94, top: 75} \ resize Object {left: 94, top: 75} \ stop Object {left: 66, top: 55} \ }}} \ \ However, when changing the animate property in the resizable call to false, the values in the log entry corresponding to the stop event have changed: \ \ {{{ \ start Object {left: 66, top: 55} \ resize Object {left: 66, top: 55} \ stop Object {left: 66, top: 55} \ }}} → I am working on a component where you can move markers on a grid. The markers can be dragged and dropped inside that grid and they can be horizontally resized. \ \ When resizing a marker, I noticed that it would also change it's position slightly. This only seemed to happen when enabling animation for the resize operation. \ \ While investigating this issue, I came across some behavior that seemed weird to me. You can observe this in this fiddle: http://jsfiddle.net/qjpKC/3/ \ \ The fiddle will create a single marker on an imaginary grid. When, for example, increasing the width of the marker by one unit, the output in the console should look like: \ \ {{{ \ start Object {left: 94, top: 75} \ resize Object {left: 94, top: 75} \ stop Object {left: 66, top: 55} \ }}} \ \ However, when changing the animate property in the resizable call to false, the values in the log entry corresponding to the stop event have changed: \ \ {{{ \ start Object {left: 66, top: 55} \ resize Object {left: 66, top: 55} \ stop Object {left: 66, top: 55} \ }}}

description:

I am working on a component where you can move markers on a grid. The markers can be dragged and dropped inside that grid and they can be horizontally resized. \ \ [[Image(http://i.imgur.com/josMaRC.png)]] \ \ When resizing a marker, I noticed that it would also change it's position slightly. This only seemed to happen when enabling animation for the resize operation. \ \ While investigating this issue, I came across some behavior that seemed weird to me. You can observe this in this fiddle: http://jsfiddle.net/qjpKC/3/ \ \ The fiddle will create a single marker on an imaginary grid. When, for example, increasing the width of the marker by one unit, the output in the console should look like: \ \ {{{ \ start Object {left: 94, top: 75} \ resize Object {left: 94, top: 75} \ stop Object {left: 66, top: 55} \ }}} \ \ However, when changing the animate property in the resizable call to false, the values in the log entry corresponding to the stop event have changed: \ \ {{{ \ start Object {left: 66, top: 55} \ resize Object {left: 66, top: 55} \ stop Object {left: 66, top: 55} \ }}} → I am working on a component where you can move markers on a grid. The markers can be dragged and dropped inside that grid and they can be horizontally resized. \ \ When resizing a marker, I noticed that it would also change it's position slightly. This only seemed to happen when enabling animation for the resize operation. \ \ While investigating this issue, I came across some behavior that seemed weird to me. You can observe this in this fiddle: http://jsfiddle.net/qjpKC/3/ \ \ The fiddle will create a single marker on an imaginary grid. When, for example, increasing the width of the marker by one unit, the output in the console should look like: \ \ {{{ \ start Object {left: 94, top: 75} \ resize Object {left: 94, top: 75} \ stop Object {left: 66, top: 55} \ }}} \ \ However, when changing the animate property in the resizable call to false, the values in the log entry corresponding to the stop event have changed: \ \ {{{ \ start Object {left: 66, top: 55} \ resize Object {left: 66, top: 55} \ stop Object {left: 66, top: 55} \ }}}

Changed October 22, 2013 06:20PM UTC by tj.vantoll comment:2

owner:	→ OliverSalzburg
status:	new → pending

Hi OliverSalzburg,

Thanks for taking the time to contribute to the jQuery UI project. Does this behavior occur without the grid option set and/or the draggable widget applied. The more you can reduce the problem the better we're able to figure out what's going on here. I'm also wondering whether this is a duplicate of #5027.

Thanks!

Changed October 22, 2013 09:51PM UTC by OliverSalzburg comment:3

status:	pending → new

Replying to [comment:2 tj.vantoll]:

Does this behavior occur without the grid option set and/or the draggable widget applied.

You're right. The grid doesn't really seem to be of any relevance in this context. Neither does being draggable. I removed some code from the fiddle to reflect this: http://jsfiddle.net/qjpKC/5/

I'm also wondering whether this is a duplicate of #5027.

That's hard for me to judge, but it sounds unrelated to me.

Changed October 23, 2013 12:59PM UTC by tj.vantoll comment:4

resolution:	→ duplicate
status:	new → closed

Duplicate of #7453.Thanks. Seeing this reduced makes is easier to see the problem. This is actually a duplicate of #7453.

Changed October 23, 2013 01:44PM UTC by OliverSalzburg comment:5

Replying to [comment:4 tj.vantoll]: