div reverts to original size after animation (webkit only)

[patrickwhalen]

Place one div inside another (outer and inner); 'outer' has absolute positioning.

Place text content inside the 'inner' div.

Animate the 'inner' div width and padding to '0'.

The width of the 'outer' div should (and does) animate along with the 'inner'.

The problem is that at the end of the animation, the 'outer' div reverts to its original size. This occurs only in webkit based browsers (tested on Mac OS X only).

Please see attached files for simple example.

Workaround is to determine the outerWidth of the 'inner' div, and simultaneously reduce the width of the 'outer' by the same amount.

Discussion here: ​http://stackoverflow.com/questions/920718/jquery-div-pops-back-to-full-size-after-animation

[patrickwhalen]

Simple pared-down example contains .html .css and .js files.

[patrickwhalen]

Single page version for browser viewing.

[snover]

​test case. Not actually sure this is a jQuery bug though.

[patrickwhalen]

Replying to snover:

​test case. Not actually sure this is a jQuery bug though.

Not sure what is considered a bug. Certainly this is not caused by behavior inherent in jQuery, but rather in Webkit.

As you can see (and perhaps have already tested), if you set the styles of the .inner manually in CSS instead of via animation, the incorrect behavior is the same. ​http://jsfiddle.net/ZHNKf/3/

Changing the width of .inner to 1px gives the proper display of the outer container. ​http://jsfiddle.net/ZHNKf/2/

So it is only a jQuery issue in the sense that it endeavors to correct cross-browser issues. Certainly low priority since a workaround is simple. (Simpler than the one I came up with in the SO post from my nascent jQuery days.)

If it is beyond the scope of jQuery's mission, then it ought to be closed.

[timmywil]

Confirmed for 1.6b1. ​http://jsfiddle.net/timmywil/ZHNKf/5/

[timmywil]

#10624 is a duplicate of this ticket.