Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#11522 closed bug (duplicate)

Calculating width/height interferes with CSS transitions

Reported by: [email protected] Owned by: gnarf
Priority: low Milestone: 1.8
Component: css Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:


Took me hours to isolate this bug. It appears to be non-deterministic, and very case-specific.

Essentially, calling width(), innerWidth(), height(), or innerHeight() (as getters) on an inline-block element before calling addClass() or removeClass() can interfere with the CSS transition that the addClass() or removeClass() call should be triggering, particularly in WebKit. Try this example in Chrome or Safari:


The boxes should be smoothly transitioning, but instead they often jump to the transition's conclusion. Now, this only seems to happen when the element is inline-block and has zero width in one of its two states. (It only requires one element; the 4 are just for show.)

Loading the same example in Firefox 11.0, the issue isn't as obvious, but I sometimes see the block "flicker" to the transition-complete state for a single frame. Again, calling the element's width(), outerWidth(), height(), or outerHeight() method appears to cause this behavior.

This may be a WebKit/Mozilla bug (I haven't tested other browsers), but I thought I'd report it here first. I'm not sure how those dimension methods are affecting the element, though I did notice that they cause $(box).attr('style') to change from undefined to the empty string.

Change History (5)

comment:1 Changed 11 years ago by Rick Waldron

Component: unfiledcss
Milestone: None1.8
Owner: set to gnarf
Priority: undecidedlow
Status: newassigned

@gnarf can you take a look at this?

comment:2 Changed 11 years ago by anonymous

I found on a duplicate but old and closed bug report a comment that this occurs when you use reload and not when you hit enter from the url bar to load the page. I tested it on a div-centering formula I wrote that relies on outerHeight and innerHeight and it is true, hitting reload I can reproduce the bug every time, hitting enter it never reproduces. Maybe something to do with how the CSS functions interact with document.ready?

comment:3 Changed 11 years ago by mikesherov

So, I just submitted a pull request for #11293 that may be related: https://github.com/jquery/jquery/pull/807

We do this goofy thing where if an element's offsetWidth or offsetHeight is equal to 0, we do a swap for display:block. This may be interfering with that.

Please refer to the discussion on https://github.com/jquery/jquery/pull/807 .

comment:4 Changed 11 years ago by mikesherov

Resolution: duplicate
Status: assignedclosed

I'm convinced this is a dupe of #11293 I'm closing it as such. Please refer to https://github.com/jquery/jquery/pull/807

If the Pull Request doesn't address this issue, please feel free to reopen.

comment:5 Changed 11 years ago by mikesherov

Duplicate of #11293.

Note: See TracTickets for help on using tickets.