Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#10183 closed bug (invalid)

Strange results for getting height of hidden div.

Reported by: jonnew@… Owned by: jonnew@…
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>

Change History (10)

comment:1 Changed 8 years ago by Rick Waldron

Component: unfileddimensions
Owner: set to jonnew@…
Status: newpending

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

comment:2 Changed 8 years ago by Rick Waldron

Priority: undecidedlow

comment:3 Changed 8 years ago by jonnew@…

Status: pendingnew

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/

comment:4 Changed 8 years ago by timmywil

Resolution: invalid
Status: newclosed

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.

comment:5 Changed 8 years ago by anonymous

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.

comment:6 Changed 8 years ago by jonnew@…

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

comment:7 Changed 8 years ago by joelanmaqn@…

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

comment:8 in reply to:  7 Changed 8 years ago by joelanman@…

sorry - that's joelanman@…

comment:9 Changed 8 years ago by jonnew@…

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.

comment:10 Changed 8 years ago by jonnew@…

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> If you have this: <div id="d1"><p id="p1">blah!</p></div><div id="d2" style="position: absolute"><p id="p2">blah!</p></div> <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

Note: See TracTickets for help on using tickets.