Skip to main content

Bug Tracker

Side navigation

#6115 closed bug (worksforme)

Opened February 18, 2010 09:48AM UTC

Closed October 06, 2010 02:17AM UTC

Last modified May 28, 2012 09:57PM UTC

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 :

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

Attachments (0)
Change History (11)

Changed February 18, 2010 10:10AM UTC by Laurent comment:1

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

Changed February 18, 2010 12:44PM UTC by Laurent comment:2

actually it didn't fix the issue :(

Changed October 06, 2010 02:17AM UTC by addyosmani comment:3

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:

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.

Changed November 27, 2010 04:42AM UTC by anonymous comment:4

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.

Changed November 27, 2010 07:15AM UTC by ajpiano comment:5


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

Changed July 10, 2011 01:24AM UTC by danny comment:6

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.

Changed July 16, 2011 04:11AM UTC by anonymous comment:7

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.

Changed July 16, 2011 04:42AM UTC by rwaldron comment:8

@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: Open the link and click to "Fork" in the top menu.

Changed August 04, 2011 05:55PM UTC by 2wheels1man comment:9

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...

Changed March 20, 2012 03:47PM UTC by anonymous comment:10





] ==


Changed May 28, 2012 09:57PM UTC by MI5 comment:11

To correct this problem use:

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

Out instead of:


$(document).ready(function() {});