samples: intrinsicsize conflicting with CSS object-fit

I recently added the intrinsicsize attribute to our news site when I was anyway working on our image component, as I liked the idea behind it and the provided layout stability helps our readers massively. Of course it was not yet active in browsers, but I wanted to be prepared for that day.

After a few weeks I switched the “Experimental Webplatform Features” flag on, as I wanted to demo new stuff in a meetup talk. Of course, I didn’t turn the flag back off afterwards, so that intrinsicsize stayed activated.

Now, when I returned to our site, I discovered that suddenly certain images (but not all) where distorted. E.g.:

link

What the distorted images had in common was that they had the CSS property object-fit set - either to contain (1. example) or to cover (2. example). The <img>'s width and height attributes were set to the desired size of the area into which to fit the respective image. And intrinsicsize was being fed the exact same values. E.g.

<img src="image-with-unknown-aspect-ratio.jpg"
         width="400"
         height="300"
         intrinsicsize="400x300"
         style="object-fit: contain">

See this isolated demo.

At least for me this result was unexpected, as to my understanding, the job of the intrinsicsize attribute was to provide layout stability for when not both axis’ dimensions are provided.

But why would it interfere with object-fit?

I know that in the explainer you write:

the image would raster at these dimensions

and that this is why the result comes together as it does.

(Although, to be precise, it does not raster at the given dimensions, but instead it just scales the original image in both axis until it meets the given size. Otherwise this image would be pixelated, which it is not)

My question/food for thought now is: should this behavior still apply for when object-fit is active? What real world use case is there to stick with the current state of implementation?

Because the way it is now, when serving an <img> element, I would need to know if some stylesheet applies the object-fit property and if so I would need to strip the intrinsicsize attribute from my HTML output. Which is not obvious to figure out from the HTML perspective.

object-fit should either overrule intrinsicsize or there should be an additional CSS property that overrides the HTML sibling, as do CSS’es width and height.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 4
Comments: 20 (2 by maintainers)

Most upvoted comments

@schepp Good news: CSS aspect-ratio is also under active development.

There’s a bit in the middle of this article where I opine why aspect-ratio wouldn’t be great for images that don’t fit within pre-defined layout slots (tl;dr one-off images would require high-specificity inline styles, which sacrifice the separation of concerns).

There is, however, an interesting proposal within the aspect-ratio spec that proposes leveraging aspect-ratio in UA stylesheets in order to repurpose the ancient width and height attributes so that they’d provide the same layout stability wins that intrinsicsize does. Is it feasible? What are the tradeoffs vs intrinsicsize? Would universal implementation be harder or easier, vs intrinsicsize? I don’t know, but I want to spend some time thinking about it.

eeeps on Jan 21, 2019

I’d prefer if browsers recovered from invalid intrinsic size. If it’s only a hint, there’s no risk of breaking pages when its used: if it’s correct, pages are faster. If it’s not correct, nothing has been lost compared to not having it.

I’m thinking about a use-case of a CDN that automatically adds intrinsicsize to all <img> elements.

HTML and images can have different cache times. Images could be from 3rd party origins that can modify them at any time. Even if HTML is modified to perfectly match images at particular time from particular perspective seen by the CDN, there’s still no guarantee that this will match what the browser gets.

Of course authors are not supposed to do silly things like images that suddenly vary in size (or are UA sniffed or random or whatever), but tooling deployed at large scale inevitably runs into authors who do silly things.

It’d be fine if browser ignored off-by-one errors or 1% difference in aspect ratio (not noticeable by users). For example, if I use this together with Client-Hints I may give you a size for 1x images, and the 2x images might end up having a sliiighly different aspect ratio if their dimensions aren’t evenly divisible by 2.

kornelski on Jan 21, 2019

@Schepp —

In the linked Iron Man example, you have marked the <img> up as having an intrinsicsize="400x300". This is incorrect, as the linked image file is actually 310×445; marking it up as intrinsicsize="310x445" fixes the issue.

In my mind, object-fit and intrinsicsize are not conflicting at all, here. What is conflicting is the intrinsicsize and the actual size of the image.

I don’t think that any CSS should have the power to override, or invalidate, intrinsicsize. It operates at a lower level, telling the browser to treat the linked resource as if it had certain dimensions. All CSS sizing happens after that and layers cleanly on top of that.

What to do in cases like yours, where the intrinsicsize is wrong, is an interesting question. Is intrinsicsize a hint, which can be overridden by reality, in case the hint was a lie? I think there are arguments for this, but I also understand the decision to, in case of conflict, keep the intrinsicsize dimensions, and let them override images’ actual native dimensions for the purposes of intrinsic sizing:

If you use intrinsicsize you (and browsers/tooling) are guaranteed that the image will not trigger any relayouts.
intrinsicsize errors are much easier to visually catch, as they’re visible on the fully-loaded page (distorted image vs a relayout + a visually correct image).

eeeps on Jan 20, 2019

I think one gain from intrinsic size is layout stability, which means the ‘invalid intrinsic size’ will not be corrected. As a result images might be distorted but this prevents contents from shifting around on the page.

In responsive images case, all images in the src_set are expected to have same aspect-ratio, so setting intrinsic size on those images shouldn’t end up with invalid intrinsic size.
In non responsive image case, intrinsic size simply naturalWidth / naturalHeight (density corrected). And I’d encourage web developers to not put invalid value for intrinsicSize?

I am not that familiar with Client-Hints, is it allowed to have image sources with different aspect-ratio?

loonybear on Feb 8, 2019