#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: |
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 (6)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
| Component: | unfiled → dimensions |
|---|---|
| Owner: | set to 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.
comment:3 Changed 12 years ago by
| 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
comment:4 Changed 12 years ago by
| Status: | new → pending |
|---|
comment:5 Changed 12 years ago by
| 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!
comment:6 Changed 11 years ago by
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.
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