Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#8816 closed bug (invalid)

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:


How to repeat:


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');


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>


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)

Change History (6)

comment:1 Changed 12 years ago by anonymous

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

comment:2 Changed 12 years ago by timmywil

Component: unfileddimensions
Owner: set to Chaoser
Status: newpending

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.

comment:3 Changed 12 years ago by Chaoser

Status: pendingnew

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

comment:4 Changed 12 years ago by timmywil

Status: newpending

comment:5 Changed 12 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

comment:6 Changed 11 years ago by Jon Antoine <[email protected]…>

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.

Note: See TracTickets for help on using tickets.