#11522 closed bug (duplicate)
Calculating width/height interferes with CSS transitions
Reported by: | 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.
Change History (5)
comment:1 Changed 11 years ago by
Component: | unfiled → css |
---|---|
Milestone: | None → 1.8 |
Owner: | set to gnarf |
Priority: | undecided → low |
Status: | new → assigned |
comment:2 Changed 11 years ago by
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
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
Resolution: | → duplicate |
---|---|
Status: | assigned → closed |
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.
@gnarf can you take a look at this?