Issues in Safari/Chrome to calculate position, innerWidth when an image without a declared width is in the layout

[scannercf]

I have a set of left-floated <div>s that contain an <ul><li><a> structure (a menu!). After CSS it looks like a set of tabs with horizontal sub-menus below.

Download links below the issue's explanation..

When the first tab contains an <a> link with an image within AND the image does not have a declared width in the HTML ( <a href="#"><img src="images/home-icon.png" /></a> ), Safari and Chrome cannot properly calculate the second tab left position because it doesn't take the image's width into account.

When you declare the image's width ( <img src="images/home-icon.png" width="16" /></a> ) or you replace the image with a simple text link, then it works fine.

No problems with Firefox / Opera... Haven't tested in IE yet, but I think is a webkit issue.

Download files and screenshots here: ​http://www.box.net/shared/static/9hl4pm4nhc.zip

NOTE: the position and width values you see in the screenshots (Firefox vs Safari) are jQuery-calculated. Firefox declares a width of 46px, while Safari declares 30 (the image's width is 16 pixels)

[Rick Waldron]

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

[jitter]

Webkit browsers set the height and width property after the image is loaded which often is not case in WebKit when document.ready fires. You can instead use $(window).load( ... ) for the part of your code which depends on the width of images to be known.

Check it out on this ​test case