Skip to main content

Bug Tracker

Side navigation

#8002 closed bug (worksforme)

Opened January 18, 2011 09:51PM UTC

Closed January 20, 2011 12:50AM UTC

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

Reported by: scannercf Owned by: scannercf
Priority: low Milestone: 1.next
Component: dimensions Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

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)

Attachments (0)
Change History (2)

Changed January 18, 2011 10:37PM UTC by rwaldron comment:1

owner: → scannercf
status: newpending

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!

Changed January 20, 2011 12:50AM UTC by jitter comment:2

component: unfileddimensions
priority: undecidedlow
resolution: → worksforme
status: pendingclosed

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