Bug Tracker

Opened 14 years ago

Closed 12 years ago

Last modified 11 years ago

#4541 closed bug (patchwelcome)

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


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.

Change History (10)

comment:1 Changed 14 years ago by Pitel

I just found the same problem when using 960.gs css framework. My demo is here: http://www.stud.fit.vutbr.cz/~xkalab00/jump/

comment:2 Changed 13 years ago by justbeez

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. :)

comment:3 Changed 13 years ago by waltersjack

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.

comment:4 Changed 13 years ago by rockerest

Confirmed in: Firefox 3.6 Safari 4.0.4 Chrome 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.

comment:5 Changed 13 years ago by matdumsa

Same thing here.. Here is a demo I’ve constructed to see how it affect us..


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

comment:6 Changed 13 years ago by matdumsa

so If height() == 0 is a feature, please consider this bug


if not it would be nice to know how-to tackle this issue..

comment:7 Changed 13 years ago by dmethvin

Component: unfileddimensions

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.

comment:8 Changed 12 years ago by snover

Resolution: patchwelcome
Status: newclosed

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.

comment:9 Changed 12 years ago by Marc Diethelm

Isn't this bug obsolete (and a duplicate) with #7225 being fixed and released?

comment:10 Changed 12 years ago by shadowayex

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

Note: See TracTickets for help on using tickets.