Skip to main content

Bug Tracker

Side navigation

#11522 closed bug (duplicate)

Opened March 27, 2012 02:57AM UTC

Closed June 02, 2012 07:20PM UTC

Last modified June 02, 2012 07:20PM UTC

Calculating width/height interferes with CSS transitions

Reported by: trevorburnham@gmail.com Owned by: gnarf
Priority: low Milestone: 1.8
Component: css Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (5)

Changed April 23, 2012 04:39PM UTC by rwaldron comment:1

component: unfiledcss
milestone: None1.8
owner: → gnarf
priority: undecidedlow
status: newassigned

@gnarf can you take a look at this?

Changed June 01, 2012 05:21AM UTC by anonymous comment:2

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?

Changed June 02, 2012 07:05PM UTC by mikesherov comment:3

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 .

Changed June 02, 2012 07:20PM UTC by mikesherov comment:4

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.

Changed June 02, 2012 07:20PM UTC by mikesherov comment:5

Duplicate of #11293.