Google Chrome .height(), .innerHeight(), .outerHeight() sometimes return Same values

Reported by:	Chaoser	Owned by:	Chaoser
Priority:	undecided	Milestone:	1.next
Component:	dimensions	Version:	1.5.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

How to repeat:

CSS:

#!div style="font-size: 80%"
Code highlighting:
  {{{
.box {
    position: absolute;
    width: 400px;
    top: 5px; 
    right: 5px;	
    overflow: none;
}
.box ul { padding: 0; margin: 0; list-style-type: none; }
.box.info, .box.success, .box.warning, .box.error, .box.validation {
    border: 1px solid;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.box.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../images/info.png');
}

}}}

HTML:

#!div style="font-size: 80%"
Code highlighting:
  {{{
<div class="box error" style="top: 5px; display: none; "><ul><li>Sorry, module is not available now. Cannot access Mysql Database</li></ul></div>
<div class="box info" style="top: 30px; display: none; "><ul><li>Sorry, member do not exists</li></ul></div>

}}}

JS:

#!div style="font-size: 80%"
Code highlighting:
  {{{
var last = 5;
$(function() {
$('.box').each(function(i) {
var mb = $(this);
console.log('Height: ' + mb.height() + ', InnerHeight: ' + mb.innerHeight() + ', OuterHeight: ' + mb.outerHeight());
mb.css('top', last).delay(2000 + parseInt(i)*300).fadeOut('slow');
last += parseInt(mb.innerHeight()) + 5;
});
});

}}}

If you hit refresh more times, sometimes you will get:

Height: 20, InnerHeight: 20, OuterHeight: 20

but expected result:

Height: 18, InnerHeight: 48, OuterHeight: 50

(for both .box)

Attachments (0)

Change History (6)

Changed April 08, 2011 01:26PM UTC by anonymous comment:1

Why do not directly create a jsFiddle??

I created it here: http://jsfiddle.net/gFpfj/3/

But I'm not able to reproduce the described issue:

In Firefox 4.0: Height: 20, InnerHeight: 50, OuterHeight: 52

In Chrome 10: Height: 20, InnerHeight: 50, OuterHeight: 52

Changed April 08, 2011 02:28PM UTC by timmywil comment:2

component:	unfiled → dimensions
owner:	→ Chaoser
status:	new → pending

Thanks for taking the time to contribute to the jQuery project! Thank you to the last commenter for providing a fiddle. It would be very helpful if the author of this ticket could adjust that fiddle or create a new one which reproduces the issue.

Changed April 11, 2011 11:06AM UTC by Chaoser comment:3

status:	pending → new

Strange, in fiddle its not repeating... I will try to reproduce it a bit later in project again, maybe somehow there are problems with other styles

Changed April 15, 2011 02:19AM UTC by timmywil comment:4

status:	new → pending

Changed April 29, 2011 07:55AM UTC by trac-o-bot comment:5

resolution:	→ invalid
status:	pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed December 28, 2011 11:20PM UTC by Jon Antoine <jantoine@antoinesolutions.com> comment:6

I am reopening this issue because I am seeing something very similar. I have updated the jsFiddle with code that should be reproduce the issue, but it can not be reproduced using jsFiddle. You must recreate the html/js files on a machine where the refresh button can be used.

The bug appears to have something to do with the order of chromes cache loading and JavaScript execution. If I load the page by pressing enter from chromes address bar, the issue in not reproducible. If I use chromes refresh button, the issue is reproducible.

I have tested this using the latest jQuery 1.7.1 and the latest chrome 15.0.874.121.

Side navigation

#8816 closed bug (invalid)