Bug Tracker

#4692 closed bug (patchwelcome)

Opened May 28, 2009 02:19PM UTC

Closed July 11, 2011 07:21PM UTC

Last modified March 13, 2012 04:10PM UTC

div reverts to original size after animation (webkit only)

Reported by: patrickwhalen Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.6b1
Keywords: webkit animation Cc:
Blocked by: Blocking:
Description

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

Attachments (2)
  • tester.html (0.8 KB) - added by patrickwhalen May 28, 2009 02:34PM UTC.

    Single page version for browser viewing.

  • webkit_animation_issue.zip (2.8 KB) - added by patrickwhalen May 28, 2009 02:24PM UTC.

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

Change History (6)

Changed June 13, 2010 02:52AM UTC by dmethvin comment:1

component: unfiled → fx

Changed November 19, 2010 10:28AM UTC by snover comment:2

milestone: 1.4
priority: major → low
status: new → open
version: 1.3.2 → 1.4.4

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

Changed November 19, 2010 05:56PM UTC by patrickwhalen comment:3

Replying to [comment:2 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.

Changed April 17, 2011 07:40PM UTC by timmywil comment:4

milestone: → 1.next
version: 1.4.4 → 1.6b1

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

Changed July 11, 2011 07:21PM UTC by ajpiano comment:5

resolution: → patchwelcome
status: open → closed

Changed November 01, 2011 07:33PM UTC by timmywil comment:6

#10624 is a duplicate of this ticket.