Bug Tracker

Modify

Ticket #4541 (closed bug: patchwelcome)

Opened 5 years ago

Last modified 2 years ago

.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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 5 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 5 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 5 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 4 years ago by rockerest

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.

comment:5 Changed 4 years ago by matdumsa

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

comment:6 Changed 4 years ago by matdumsa

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

comment:7 Changed 4 years ago by dmethvin

  • Component changed from unfiled to 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.

comment:8 Changed 3 years ago by snover

  • Status changed from new to closed
  • Resolution set to patchwelcome

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 3 years ago by Marc Diethelm

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

comment:10 Changed 3 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).

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.