Side navigation
#4541 closed bug (patchwelcome)
Opened April 16, 2009 08:57AM UTC
Closed November 19, 2010 10:04AM UTC
Last modified March 13, 2012 05:13PM UTC
.height() can be wrong for hidden divs
| Reported by: | remysharp | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4 |
| Component: | dimensions | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If the element is hidden, and if it inherits it's width from a parent element, the height is wrong. The knock on effect is that the slideDown effect jumps.
Working example: http://jsbin.com/opiwe
Uses jQuery 1.3.2 - click 'reveal' to see the jump. Replicated in FF3 and Safari (not tested Opera, but IE reported to fail too).
The issue is the height method is reporting the wrong height for two reasons:
1) When the element is changed to pos:abs the width inherits from the body, i.e. 100% so the height changes. This should swap on the width from the first visible parent.
2) The margins for the first and last nested elements (can be the same element) don't collapse against the edges when they are within a pos:abs.
I've written a patch, but it's untested in IE as yet, and my concern is performance - but I'll be happy to supply the suggested changes if you want them (remy at remy sharp dot com)
If this is fixed, it should fix the animation jumping issues people see in the slide down effects.
Attachments (0)
Change History (10)
Changed June 04, 2009 03:17PM UTC by comment:1
Changed September 16, 2009 05:50PM UTC by comment:2
Confirmed in IE 6-8, Safari 3-4, FF 2-3.5 on Windows and Mac OSX.
We've found that this bug is huge issue, especially when using UI Accordion with autoHeight=false, active=false, and collapsible=true.
The only temporary workaround we've come up with to keep accordions from jumping is to force the width in pixels on the inner accordion element being animated--which isn't a viable an option in liquid layouts.
Because the use of .height() is so essential, this bug affects a ton of jQuery and UI internals and third-party plugins.
Please fix. :)
Changed September 25, 2009 09:06PM UTC by comment:3
I was having same issue with 'slideDown effect jumps'. I fixed mine by adding everything inside of the div that was sliding into a single container div within it. Simple fix until bug is resolved. Hope that helps.
Changed January 21, 2010 11:17PM UTC by comment:4
Confirmed in:
Firefox 3.6
Safari 4.0.4
Chrome 3.0.195.38
Opera 10.10
IE 8.0.6001.18865
With jQuery 1.4 (latest stable).
Live example at http://next.thomasrandolph.info/services.php
Very annoying.
Changed March 22, 2010 02:14PM UTC by comment:5
Same thing here.. Here is a demo I’ve constructed to see how it affect us..
http://team7.ath.cx:8080/~ma_dum/sandbox/demo.html#
My demo uses the latest jQuery 1.4 from the google CDN.. Maybe after all height() is expected to returned the space the element consumes on the page (which is obviously zero if the element is hidden) but in this case jQuery UI should NOT use it to compute the height of elements that could be hidden..
Changed March 22, 2010 02:26PM UTC by comment:6
so If height() == 0 is a feature, please consider this bug
http://dev.jqueryui.com/ticket/5400
if not it would be nice to know how-to tackle this issue..
Changed June 12, 2010 06:13PM UTC by comment:7
| component: | unfiled → dimensions |
|---|
This is a tough problem to solve. An element reporting height==0 might be that way due to a distant ancestor being hidden. It would be possible to ensure the element was not hidden by walking up the tree temporarily ensuring all ancestors were not hidden, getting the height, and then re-hiding any ancestors. There can be serious performance issues with this due to reflows, plus the answer you get may not be accurate anyway.
Changed November 19, 2010 10:04AM UTC by comment:8
| resolution: | → patchwelcome |
|---|---|
| status: | new → closed |
As per dmethvin’s comment trying to prevent this behaviour is likely to be prohibitively expensive but we welcome any patches in this regard if they can be shown not to destroy performance.
Changed December 17, 2010 07:57PM UTC by comment:9
Isn't this bug obsolete (and a duplicate) with #7225 being fixed and released?
Changed January 24, 2011 08:51PM UTC by comment:10
Is there a fix or plans for a fix for this? I'm having the issue On Firefox 3.6.13, but not on Google Chrome 8.0.552.237. That is, the slideDown does not jump in Chrome but does in Firefox).
I just found the same problem when using 960.gs css framework. My demo is here: http://www.stud.fit.vutbr.cz/~xkalab00/jump/