Sizing loading, pending and broken images

I've noticed that trying to resize <img> elements in css does not work
properly while the image is loading.

Yes, it's a bad practice. Some people do it anyway.

As an example, try something like this:

<style>
img {
   max-width: 100%;
   height: auto;
}</style>

<img width=100 height=120 src=onesecondloadtime1.jpg><!-- they really
are 100x120, it's just slow loading for other reasons -->
<img width=100 height=120 src=onesecondloadtime2.jpg>
<img width=100 height=120 src=onesecondloadtime3.jpg>
<img width=100 height=120 src=onesecondloadtime4.jpg>

Assuming that the viewport can fit the image easily, this rule shouldn't
do anything. Yet, it makes the box for the image have zero height[1]
until it begins loading. This naturally leads to relayouts. I dislike
this, since it causes pointless relayouts that waste cpu time and
disorient the user. The entire point of specifying the image dimensions
in html was to avoid this happening!

What exactly is the defined semantics for the width and height attributes?

I find this[2]:

The width and height attributes on ... img ... and that either
represents an image or that the user expects will eventually represent
an image, map to the dimension properties width and height on the
element respectively.

Jumping thru some hoops [3][4][5], I find that this basically means that
this made up ruleset applies:

::image-like-content[width] {
    x-hack-specificity: 0-0-0;
    width: attr(width);
}
::image-like-content[height] {
    x-hack-specificity: 0-0-0;
    height: attr(height);
}

This is not what content authors expect when they try styling an image
element. They expect the attributes to set the intrinsic size of the
replaced content until it starts loading.

What can be done to solve the issue of css rules messing with the
attributes that are trying to avoid a relayout?

[1] Tested in SeaMonkey and Chrome. [6]
[2]
http://w3c.github.io/html/rendering.html#replaced-elements-image-maps
(line above the linked heading)
[3]
http://w3c.github.io/html/semantics-embedded-content.html#dimension-attributes
[4] http://w3c.github.io/html/rendering.html#as-hints-for-the-rendering
[5] http://w3c.github.io/html/rendering.html#presentational-hints
[6] Internet Explorer 11 is the weirdo that thinks the images are
perfect squares instead. So this isn't even interoperable!

Received on Saturday, 28 January 2017 06:43:54 UTC