CSS object-view-box

[jsnkuhn]

Description

from spec:

The object-view-box property specifies a "view box" over an element, which allows zooming or panning over the element’s contents.

explainer: https://blog.logrocket.com/guide-css-object-view-box/

this property seem to be tied in some way to view transitions??

FYI this was temporarily part of css-images-4 but was moved to css-images-5. Many explainers still link to images 4.

Specification

https://drafts.csswg.org/css-images-5/#the-object-view-box

Open Issues

https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+is%3Aopen+%22object-view-box%22+

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=object%20view%20box

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Mozilla: mozilla/standards-positions#626

can't find anything related in webkit

Browser bug reports

chrome:
https://bugs.chromium.org/p/chromium/issues/list?q=object-view-box&can=2

firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=1773791

webkit:
can't find anything

Developer discussions

No response

Polls & Surveys

object-view-box is the second most added to reading list element

Existing Usage

Percentage usage is very low right now as would be expected with minimal implementation. Around .02%
https://chromestatus.com/metrics/css/timeline/popularity/713

Workarounds

Currently folks are using the combination of background-image, background-size, and background-position to get this functionality because there is no way to do this with content images in CSS. In the process we move a content image from the html where it likely belongs to a CSS background image only for the purpose of styling.

There should be parity between what we can do with content and style images.

object-fit and object-position are also possibilities here. But use cases are limited by the lack of fine grained control of image size with object-fit.

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[dandclark]

Thank you for proposing CSS object-view-box for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.