Bug 276681 - Contain:size breaks object-fit
Summary: Contain:size breaks object-fit
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 17
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar, WPTImpact
Depends on:
Blocks:
 
Reported: 2024-07-16 13:43 PDT by Eric Portis
Modified: 2024-08-06 00:41 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Portis 2024-07-16 13:43:52 PDT
Right now, in WebKit, applying contain:size to an element with object-fit:contain effectively disables object-fit:contain.

The CSSWG has resolved that contain:size should only affect the size of the element's box, but not affect the natural aspect-ratio of its contents (which are used by object-fit): https://github.com/w3c/csswg-drafts/issues/10116#issuecomment-2035803916

Use cases:
- Using object-fit along with auto-sizes (this issue blocks https://bugs.webkit.org/show_bug.cgi?id=253143 because of https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size)
- Making an img's box size completely determined from the "outside-in" without distorting it, e.g., in grids: https://codepen.io/eeeps/pen/PorPgvy

While the spec has not been written yet, there are Web Platform Tests for this resolution, which WebKit alone fails:

https://wpt.fyi/results/css/css-images?label=master&product=safari%5Bstable%5D&product=safari%5Bexperimental%5D&product=firefox%5Bstable%5D&product=chrome%5Bstable%5D&aligned&q=object-fit-containsize%20or%20object-fit-containcontain
Comment 1 Radar WebKit Bug Importer 2024-07-16 13:50:53 PDT
<rdar://problem/131866042>