Created attachment 106001 [details] Test case. Shift-Refresh frequently and the layout will flicker When an img tag's width and height are set in HTML and "width: 100%; height: auto;" is set in CSS, Webkit should have all the information it needs to lay out the page correctly. In reality, before the image is loaded the page is laid out as though it isn't there; then, when the image starts loading, Webkit resizes it. This doesn't happen 100% of the time, but it's noticeable. Firefox does this too, albeit less frequently. IE8/9 and Opera don't.
Is this a reduction of behavior which is causing problems? Naively it seems like this is an optimization opportunity for a pretty minor corner case rather than a bug.
Problems can arise with JavaScript. For instance, if you do $(document).ready(function() { alert($('img').height()); }); -- the results are inconsistent. And that error bubbles up to the img's container elements. One can debate whether that JavaScript ought to work or not. I decided to file a bug report instead.
After talking to Tab Atkins (our CSS/HTML5 expert) this isn't a bug. Tracing things through: "The width and height attributes on applet, embed, iframe, img, object or video elements, and input elements with a type attribute in the Image Button state, map to the dimension properties 'width' and 'height' on the element respectively." (http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#images-0). This means that "the user agent is expected to use the parsed dimension as the value for a presentational hint" (http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#maps-to-the-dimension-property). A presentational hint is "author-level zero-specificity" (http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#presentational-hints). In other words, setting the width and height in HTML and "width: 100%; height: auto;" in CSS is exactly equivalent to just setting "width: 100%; height: auto;" in CSS (because the latter overrides the former). However, "if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is: (used width) / (intrinsic ratio)" (http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height). What this means is that the height can't be known until the image is loaded and its aspect ratio determined, which means that WebKit can't lay out the page until the image is loaded. Use "onload" instead of "ready".