| Summary: | WebKit computed/fitted image size differs from Blink and Gecko | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nicholas Shanks <nickshanks> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | ||
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.9 | ||
| URL: | http://www.roh.org.uk/events | ||
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.