Bug Tracker

Ticket #4692 (closed bug: patchwelcome)

Opened 5 years ago

Last modified 3 years ago

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

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

webkit_animation_issue.zip Download (2.8 KB) - added by patrickwhalen 5 years ago.
Simple pared-down example contains .html .css and .js files.
tester.html Download (855 bytes) - added by patrickwhalen 5 years ago.
Single page version for browser viewing.

Change History

Changed 5 years ago by patrickwhalen

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

Changed 5 years ago by patrickwhalen

Single page version for browser viewing.

comment:1 Changed 4 years ago by dmethvin

  • Component changed from unfiled to fx

comment:2 follow-up: ↓ 3 Changed 4 years ago by snover

  • Priority changed from major to low
  • Status changed from new to open
  • Version changed from 1.3.2 to 1.4.4
  • Milestone 1.4 deleted

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

comment:3 in reply to: ↑ 2 Changed 4 years ago by 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.

comment:4 Changed 3 years ago by timmywil

  • Version changed from 1.4.4 to 1.6b1
  • Milestone set to 1.next

comment:5 Changed 3 years ago by ajpiano

  • Status changed from open to closed
  • Resolution set to patchwelcome

comment:6 Changed 3 years ago by timmywil

#10624 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.