GoogleChrome / GoogleChrome/samples

intrinsicsize conflicting with CSS object-fit

Open
#627 20 comments 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
5.9k
Forks
2.4k
Avg merge
24m
Merged PRs (30d)
2

Description

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.:

![image](https://user-images.githubusercontent.com/135141/51396742-f93e2580-1b3f-11e9-8fcb-e4695eaba258.png)

[link](https://rp-online.de/nrw/staedte/neuss/kammelle-us-koelle-2019-im-crowne-plaza-neuss-feiern-mit-brings-hoehner-und-guido-cantz_aid-35695693)

![image](https://user-images.githubusercontent.com/135141/51396975-83868980-1b40-11e9-9121-4f2c1379119d.png)

[link](https://rp-online.de/sport/fussball/fortuna/fortuna-duesseldorf-burgfrieden-zwischen-friedhelm-funkel-und-schaefer_aid-35674969)

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 ``'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.

```html

```

See this isolated [demo](https://codepen.io/Schepp/pen/WLqJqq).

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](https://codepen.io/Schepp/pen/OreZGa) 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 `` 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`.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.