#10183 closed bug (invalid)

Opened September 01, 2011 01:36AM UTC

Closed September 20, 2011 04:49PM UTC

Last modified March 14, 2012 09:09AM UTC

Strange results for getting height of hidden div.

Reported by:	jonnew@gmail.com	Owned by:	jonnew@gmail.com
Priority:	low	Milestone:	None
Component:	dimensions	Version:	1.6.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

If I have 2 identical divs, each containing a <p> tag with text. The only difference is that the first one has display:none.

I would expect that when using jQuery to get the height() of each div the results would be the same but they are not. When debugging, I noticed that jQuery would add "position:absolute; display:block; visiblity:hidden;" However, weirdly, it seems that the position:absolute part adds unnecessary height. What's also weird, is that this error does not occur in jsFiddle so, I pasted the HTML/Javascript below.

This occurs in Firefox 6, Chrome 15.0.865.1000, and Safari 5.1.

This works fine in IE9.

<html>
	<head></head>
	<body>
		<div id="d1"><p id="p1">blah!</p></div>
		<div id="d2" style='display:none;'><p id="p2">blah!</p></div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
		<script>
			$(document).ready(function(){
			    //visible
				console.log($("#d1").height());
				console.log($("#p1").height());

				//invisible
				console.log($("#d2").height());
				console.log($("#p2").height());

			});

		</script>

	</body>

</html>

Attachments (0)

Change History (10)

Changed September 19, 2011 04:13PM UTC by rwaldron comment:1

component:	unfiled → dimensions
owner:	→ jonnew@gmail.com
status:	new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/

Open the link and click to "Fork" (in the top menu) to get started.

(Even though you've stated the issue cannot be reproduced, it will still be useful for comparison, thanks!)

Changed September 19, 2011 04:30PM UTC by rwaldron comment:2

priority:	undecided → low

Changed September 19, 2011 11:06PM UTC by jonnew@gmail.com comment:3

status:	pending → new

This issue still exists on jQuery Edge.

I created a fiddle, even though the problem doesn't manifest itself in this context: http://jsfiddle.net/Fny7P/1/

Changed September 20, 2011 04:49PM UTC by timmywil comment:4

resolution:	→ invalid
status:	new → closed

jsfiddle is a normal environment. If the issue cannot be reproduced there, it usually means there is problem with the OP's environment and not with jQuery. If the issue can be reproduced on jsfiddle, we can reopen this ticket.

Changed September 20, 2011 05:26PM UTC by anonymous comment:5

I'm sorry, I've reproduced this on several browsers across several computers. I understand it's very odd that I can't repro on jsFiddle, but give me a chance. If you copy the code I posted and ran it from notepad, you should be able to reproduce the bug. I would be more than happy to help in any way I can.

Changed September 20, 2011 05:26PM UTC by jonnew@gmail.com comment:6

Last comment was from me, the original submitter. Forgot to login. Sorry about that.

Changed September 21, 2011 04:52PM UTC by joelanmaqn@gmail.com comment:7

In this example, I don't understand jQuery's behaviour finding the height of hidden elements.

When the parent (#d2) is hidden, the correct height is reported for #d2, but the height of the child (#p2) is reported as 0. Why is this, considering neither is visible. Surely they should both either:

a) report the height they would have if visible, or

b) report 0 as they have no 'height'.

for the record, I'd prefer a) - this issue of jQuery not reporting consistent height of an element based on the *parent* visibility is hard to work with.

Joe Lanman

Changed September 21, 2011 04:53PM UTC by joelanman@gmail.com comment:8

sorry - that's joelanman@gmail.com

Changed September 21, 2011 10:47PM UTC by jonnew@gmail.com comment:9

joelanman, thanks for taking the time to respond!

I'm actually seeing incorrect height for #d2. Instead of using the jsFiddle link, if you copy and paste the code into notepad and run it, you'll see a console output of 20, 20, 52, 0. The '52' for #d2 is particularly confusing, and it's doubly confusing that the result is different in jsFiddle than in notepad.

Changed September 27, 2011 12:52AM UTC by jonnew@gmail.com comment:10

I chatted with Eviltwin about this in the Jquery IRC room. JQuery sets the hidden node to display:block and position:absolute, grabs the height, and then resets. It turns out, not resetting the default stylesheet, (specifically margin:0), is responsible for this behavior. JSFiddle resets the stylesheet.

Here's the conversation:

<Eviltwin> newtang: I know exactly what it's happening

<Eviltwin> They have a CSS reset and you don't

<Eviltwin> http://fiddle.jshell.net/css/normalize.css

<newtang> Nice find!

<Eviltwin> Probably the div { margin: 0; padding: 0; }

<newtang> Oh, that makes sense

<newtang> So, when jquery sets position to absolute, it should probably also adjust padding/margin

<Eviltwin> Well technicalyl the padding/margin are part of the element

<Eviltwin> It's the margin on the <p> tag that's causing the oddity

<Eviltwin> p { margin: 0; } fixes it

<newtang> What purpose does the position:absolute serve?

<Eviltwin> Not causing all your shit to shift when it makes the swap

<Eviltwin> Otherwise it might flash occupy that space for an instant

<newtang> I see, got it

<Eviltwin> If you set just position:absolute on the element, you get this: http://cl.ly/2t2L2n1O1s2z2j1M1Z1J

<Eviltwin> Compared to the other one: http://cl.ly/2r0V3u1d3K3N3A0R1O2L

<newtang> But why does the P have the margin when it's within an absolutely positioned div?

<Eviltwin> User agent stylesheets are sucky and built for HTML4 days, that's why people use CSS resets

<newtang> Eviltwin, I appreciate the help. I'm confused about one thing: I wouldn't think the styles of a p would be affected if its parent container was absolutely positioned or not. Regrdless of a user agent stylesheet

<Eviltwin> Well it's definitely the browser causing the problem, not jQuery

<Eviltwin> Something you might want to report as a WebKit bug

<newtang> Hmm, it happens in Firefox too

<Eviltwin> I think I know what's going on, maybe

<Eviltwin> p tags have p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } in the user agent stylesheet for WebKit

<Eviltwin> In a normal text environment, this margin is effectively ignored

<Eviltwin> But if you have p tags one after another

<Eviltwin> The margins collapse and you have a line between the two

<Eviltwin> And you inspect the two, you'll see the p's are the same size with the same padding

<Eviltwin> Same margin*

<Eviltwin> But the margin is *outside* the first div and *inside* the second

<Eviltwin> It even pushed the second down to below the first

<Eviltwin> Kind of reminds me of some of the UL/LI behavior

<newtang> Interesting

Side navigation