Repository navigation
[css-images-4] Should contain-intrinsic-size affect object-fit? #10116
Description
This question came up during sizes=auto spec/implementation work.
Here's a test page: https://codepen.io/eeeps/pen/mdgWNJo?editors=1101
WebKit thinks that it should, Chromium thinks that it should, and Firefox refuses to do any kind of object-fitting on size-contained elements.
Notably, @mirisuzanne thinks that it shouldn't, because contain-intrinsic-size doesn't actually change the natural dimensions of replaced elements (Image.naturalWidth/naturalHeight are unaffected), but simply tells the layout algorithm to proceed as if those were the natural dimensions.
I agree with her, and think UAs should use the actual natural dimensions that you get from Image.naturalWidth/naturalHeight, and not the contain-intrinsic-size dimensions, when painting object-fit objects into contain:sized elements. I think we need some more spec language somewhere here, although admittedly my understanding of some of the concepts here is provisional at best.
Activity
mirisuzanne commentedon Mar 21, 2024
The reason for
object-fitand related properties is to help align and size the image content inside a box that has different dimensions, or a different aspect ratio - because of some other specified styles. When we start applying those box layout dimensions to the image content, we lose the purpose of the feature.tabatkins commentedon Mar 21, 2024
Agreed, 'object-fit' 'itself clearly requires working on the actual image dimensions, or else it's worthless. The c-i-s dimensions are just to force layout stability. They only have an effect on the image's dimensions as a side-effect, since images default to stretching into their layout dimensions.
I'd have to poke around to figure out what, if anything, needs fixing in the specs; the language around intrinsic/natural dimensions is a bit wonky and there probably needs to be more "layers" of terminology here.
Loirooriol commentedon Mar 22, 2024
Some previous discussion in #6257
mirisuzanne commentedon Mar 22, 2024
We could close one of the issues, and add agenda+ to the other? It seems like there's consensus this is broken. And it seems like it should be clarified somewhere.
vmpstr commentedon Mar 22, 2024
Is this a consequence of
contain-intrinsic-sizeor size containment? Size containment says thatcontain-intrinsic-size definition says:
I couldn't find the reference for contain-intrinsic-size and natural size interactions.
In particular, in the codepen example (on Chromium), I can't get a different effect if I change contain-intrinsic-size to something like 800px 400px. It always remains a square.
eeeps commentedon Mar 22, 2024
@vmpstr Try refreshing? This has been flaky for me before. Not sure if that's CodePen's fault, or Chromiums. Anyways here's proof that it does sometimes have an effect: https://o.img.rodeo/c2axgu9ms1l3ojujbjjn.png https://codepen.io/eeeps/pen/abxWVmN?editors=1101
Loirooriol commentedon Mar 22, 2024
Open devtools and set
display: none, then unset it.Size containment, which may be affected by
contain-intrinsic-size.See the resolution in #7519 (comment).
But as I argued in #6257 (comment), this is just for sizing the
<img>. Once we know its size, the spec says to lay out normally. Soobject-fitshould work. And since the example useswidthandheight,contain-intrinsic-sizeshould have no effect at all.vmpstr commentedon Mar 23, 2024
Got it working, thanks all!
And yes, it makes sense that
contain-intrinsic-sizeaffects the img element size not the interaction withobject-fitTest interaction between object-fit and contain:size
eeeps commentedon Apr 3, 2024
First stab at a Web Platform Test https://github.com/eeeps/wpt/tree/object-fit-contain-size
mirisuzanne commentedon Apr 3, 2024
I think the desired resolution here would be what @bfgeek proposed in #6257 (comment) - though it's not clear to me which spec (if any) needs to be clarified. Maybe we're just confirming this, and adding the WPT to prove it? :)
10 remaining items
object-fit should use the "real" natural aspect ratio
object-fit should use the "real" natural aspect ratio
object-fit should use the "real" natural aspect ratio
object-fit should use the "real" natural aspect ratio
object-fit should use the "real" natural aspect ratio
Bug 1889799 [wpt PR 45563] - Test interaction between `object-fit` an…
Bug 1891601 [wpt PR 45723] - object-fit should use the "real" natural…
Bug 1891601 [wpt PR 45723] - object-fit should use the "real" natural…
eeeps commentedon Jul 16, 2024
Ran into this today in Safari and submitted https://bugs.webkit.org/show_bug.cgi?id=276681
eeeps commentedon Jan 22, 2025
A patch was submitted to the WebKit bug today. https://bugs.webkit.org/show_bug.cgi?id=276681#c2
So perhaps soon we will have three implementations, tests, but no spec yet.
Loirooriol commentedon Jan 22, 2025
Even though clarifying the spec would be good, it already implies the resolved behavior, as I explained in #6257 (comment)
'contain:size' breaks 'object-fit'
Re-Enable AutoSizeLazyLoadedImages
Bug 1889799 [wpt PR 45563] - Test interaction between `object-fit` an…
Bug 1891601 [wpt PR 45723] - object-fit should use the "real" natural…