Bug 132735 – WebKit computed/fitted image size differs from Blink and Gecko

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

[Nicholas Shanks]

The CSS is something like:
  max-width: 100%;
  height: auto;
And the container is some non-integral width smaller than the intrinsic image size (197×131).
(It may be possible to reduce this to just {width:157.9px;height:auto} though I haven't tried)

The event images on the linked page are sized as follows in a wide window:

Safari 7.0 (9537.71): 157 × 104
Chrome 34.0.1847.131: 158 × 105 (computed at 157.984 × 105.047)
Firefox 29.0: 158 × 105

It would appear that Chrome and Firefox are computing the height from the computed width, then snapping both width and height to the nearest whole pixel.

Safari seems to be rounding the width down (i.e. floor() not round()) then computing the height from the floored width. This ends up with safari being 1px shorter and narrower than the other two. Cannot test in IE. Opera ought to be the same as Chrome.

So to fix this, two changes need to be made:

1) Compute the height from the un-rounded width.
2) Round rather than floor the dimensions to the nearest pixel.

[Ahmad Saleem]

Took Wayback Archive copy - https://web.archive.org/web/20140705042012/http://www.roh.org.uk/events

Width - 158px
Height - 105.0625px

So it seems like it is fixed.

Marking this as 'Configuration Changed'. Tested using Safari 18.3.