Bug Tracker

Opened 7 years ago

Closed 5 years ago

Last modified 5 years ago

#4692 closed bug (patchwelcome)

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

Change History (6)

comment:1 Changed 6 years ago by dmethvin

  • Component changed from unfiled to fx

comment:2 follow-up: Changed 6 years ago by snover

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

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

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

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

comment:5 Changed 5 years ago by ajpiano

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

comment:6 Changed 5 years ago by timmywil

#10624 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.