Ticket #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: | ||
| Blocking: | Blocked by: |
Description
How to repeat:
CSS:
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:
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:
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
comment:2 Changed 2 years ago by timmywil
- Owner set to Chaoser
- Status changed from new to pending
- Component changed from unfiled to dimensions
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 2 years ago by Chaoser
- Status changed from pending to 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
comment:5 Changed 2 years ago by trac-o-bot
- Status changed from pending to closed
- Resolution set to invalid
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 17 months ago by Jon Antoine <jantoine@…>
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.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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