Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#6115 closed bug (worksforme)

Css width/height issue in Google Chrome

Reported by: Laurent Owned by:
Priority: undecided Milestone: 1.4.2
Component: css Version: 1.4.1
Keywords: css height width chrome Cc:
Blocked by: Blocking:


I have a problem when getting height and width of a specific div in Google chorme (no issue in ie and ff) through the command myHeight=$("#test").css("height");

In ff and ie it get me the correct size, but in chrome when I reload the page (F5) I get wrong size (and they're not the same each time)

here is an example of the issue : http://www.lo-zone.com/test.html

my javascript is used to build an image corner around the test div (by calculating it's width and height)

when I refresh the page in Google Chrome the border is not displayed with good width and height

thx if you can help me on this

Change History (11)

comment:1 Changed 7 years ago by Laurent

I found a solution.

Issue comes from css itself that has trouve in chrome.

using .height() and .width() instead of .css("height") fix the issue.

Sorry to bother

comment:2 Changed 7 years ago by Laurent

actually it didn't fix the issue :(

comment:3 Changed 7 years ago by addyosmani

Priority: undecided
Resolution: worksforme
Status: newclosed

As the version of Chrome being tested wasn't originally provided, I have recreated the test case and can confirm that on the current stable version of Chrome (6.04) there is nothing wrong with the way Chrome is calculating height's when one is not explicitly provided.

Please see here for a live test case: http://jsfiddle.net/pd8vL/1/

Multiple attempts at refreshing the page result in the same height being output each time consistently, as expected.

If you can provide us with the version you were using we can re-open this bug to re-investigate. Closing for now.

comment:4 Changed 6 years ago by anonymous

Actually - I've just had what *might* be a related bug.

jQuery in Chrome will sometimes report the correct width, other times it will be way off. I worked out in the end that I had specified my external stylesheets after my external scripts in the document head, and was also running jQuery scripts down the page as the page loaded, so I guess the CSS hadn't kicked in.

Moving the external stylesheets to be before the scripts solved this problem for me.

I know I should really be using document.ready, but for this this case it wass more practical / logical to break up the scripts across the page.

comment:5 Changed 6 years ago by ajpiano


As of 1.3, jQuery requires that you load your CSS before you load jQuery.

comment:7 Changed 6 years ago by danny

I'm finding the same thing; getting a wildly different value in Chrome for .css("height") than the actual height. This is working fine in IE and FF.

The element that the height is being looked up for is set to 'auto' btw.

comment:8 Changed 6 years ago by anonymous

Me too, getting 0 width in Chrome latest version, but correct in all other browsers. This measurement is taken after the load event is fired for an img element. If I wait some milliseconds using setTimeout, I then get the correct value.

comment:9 Changed 6 years ago by Rick Waldron

@anonymous, Please provide a reduced jsFiddle test case.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu.

comment:10 Changed 6 years ago by 2wheels1man

I had the same problem in Chrome, but found a solution. I was using $("document").ready to alert the width of an image. But the alert was poping sooner than the image was loaded. Using window.onload should solve your problem...

comment:12 Changed 5 years ago by anonymous




] ==

comment:13 Changed 5 years ago by MI5

To correct this problem use:

$(window).load(function() {});

Out instead of:

See http://stackoverflow.com/questions/6504982/jquery-behaving-strange-after-page-refresh-f5-in-chrome

$(document).ready(function() {});
Note: See TracTickets for help on using tickets.