Calculating width/height interferes with CSS transitions

[[email protected]…]

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:

​http://jsfiddle.net/TrevorBurnham/W2Sms/1/

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.

[Rick Waldron]

@gnarf can you take a look at this?

[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?

[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 .

[mikesherov]

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.

[mikesherov]

Duplicate of #11293.