css.properties.object-position - BCD on this doesn't cover support in iframe

[OnkarRuikar]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Related to mdn/content#32474 (comment)

The property doesn't work on iframes in Chromium-based browsers and Safari. But it does work in Firefox. In the OWD weekly meeting, it was decided that BCD needs to cover the iframe entry for the object-position property.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Safari

What did you expect to see?

In the object-fit BCD entry, show iframe is supported in Firefox and not in other browsers.
Or in the iframe BCD entry, show object-fit is supported only in Firefox.

Did you test this? If so, how?

Run the following playground demo in various browsers.
https://developer.mozilla.org/en-US/play?id=M%2BIuRXx6jXT3WN%2FzFjlc5FQ1p%2B8VB0qGSpBnv%2F4B8bTvJRCQtdgRm9Qi%2BaXMV3jGMLkxAnciNkCPtL9a

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

MDN metadata

MDN page report details

• Query: css.properties.object-position
• Report started: 2024-07-01T06:25:22.629Z

[ddbeck]

#23631 purports to resolve this, but it does so in an unclear way for object-position and it does not resolve the issue for object-fit. It has also produced a problem for web-features, to compute an unambiguous support status for object-position. cc: @queengooborg @caugner.

And now there's a conflicting story:

• The spec (going back at least a decade) says that object-position applies to replaced elements.
• css.properties.object-position says that object-position working with only <img> is a partial implementation.
• css.properties.object-position.applies_to_iframe_elements says that object-position not working with <iframe> is not a partial implementation for css.properties.object-position.

Taken together, this suggests there's some set of replaced elements that are required and some that are optional. Nowhere does BCD say which are optional and which are required. The only thing I'm certain of is that object-position works with <img> elements across browsers and not with <iframe> elements.

I'd prefer to see one of the following things happen:

• Revert Firefox 36+ applies object-position to iframes #23631. Add subfeatures to css.properties.object-position enumerating compatibility for all the replaced elements (e.g., create css.properties.object-position.{embed,iframe,img,…}). Set css.properties.object-position support to the earliest supported element whatever it happens to be (probably <img>).
• Revert Firefox 36+ applies object-position to iframes #23631. Set css.properties.object-position to partial_implementation: true for all the browsers that don't support object-position with iframes. In other words, treat it like Edge was treated previously and use notes and partial implementation to show that not all replaced elements can be positioned with object-position.

Whatever happens, I'd like to see symmetrical changes to object-fit, which has similar limitations reported in a different way, so that they can make sense together. It would also alleviate the need for MDN to have several admonitions regarding which elements are and are not supported for object-fit.

See also web-platform-dx/web-features#1972.

[OnkarRuikar]

Add subfeatures to css.properties.object-position enumerating compatibility for all the replaced elements (e.g., create css.properties.object-position.{embed,iframe,img,…}). Set css.properties.object-position support to the earliest supported element whatever it happens to be (probably ).

+1 to the first approach. Detailed info would be more helpful than saying partially implemennted.

[jamesnw]

For tracking down support, WPT has some test cases- https://wpt.fyi/results/css/css-images?label=master&label=stable&aligned&q=object-position. These are tests for canvas, embed, image, object, and video.

Regrettably, it looks like many of the tests are false negatives for Chrome due to image fuzziness, so it will need manual testing as well.

[ddbeck]

#25354 did the "revert" part of #23586 (comment); what remains is to create subfeatures for each of the replaced elements (and test and populate that data).