Bug Tracker

Opened 9 years ago

Closed 9 years ago

#8002 closed bug (worksforme)

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)

Change History (2)

comment:1 Changed 9 years ago by Rick Waldron

Owner: set to 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!

comment:2 Changed 9 years ago by jitter

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

Note: See TracTickets for help on using tickets.