Standardized CSS zoom

Category: CSS
Type: New or changed feature
Status: In developer trial (Behind a flag) (Chrome 128)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: StandardizedBrowserZoom
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: All JS APIs affected by zoom are tested with the following wpt tests: https://wpt.fyi/results/css/cssom-view/offsetTop-offsetLeft-with-zoom.html?label=master&label=experimental&aligned&q=cssom-view%2FoffsetTop-offsetLeft-with-zoom.html https://wpt.fyi/results/css/cssom-view/client-props-zoom.html?label=master&label=experimental&aligned https://wpt.fyi/results/css/cssom-view/getBoundingClientRect-zoom.html?label=master&label=experimental&aligned https://wpt.fyi/results/css/cssom-view/getClientRects-zoom.html?label=master&label=experimental&aligned https://wpt.fyi/results/css/cssom-view/scroll-zoom.html?label=master&label=experimental&aligned https://wpt.fyi/results/intersection-observer/zoom-scaled-target.html?label=experimental&label=master&aligned

Summary

Updates the existing implementation of the previously non-standard CSS zoom property to align with the new standard. This changes various JS APIs to align with the spec (see design doc), changes zoom to apply to iframe content documents, and changes it to apply to all inherited length properties (previously it only changed inherited font-size).

Motivation

Aligns the existing implementation of the previously non-standard CSS zoom property to align with the new standard. This changes various JS APIs to align with the spec (see design doc), change zoom to apply to iframes, and change it to apply to all inherit length properties (currently it only changes inherited font-size)

Standards & signals

Specification: https://github.com/w3c/csswg-drafts/pull/9699
Firefox: No signal — Filed a standard position request: https://github.com/mozilla/standards-positions/issues/977
Safari: No signal — Filed a standard position request: https://github.com/WebKit/standards-positions/issues/311
Web developers: Positive — Research collected as part of the previous attempt to remove CSS zoom demonstrated several use cases.

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=cssom-view%2FoffsetTop-offsetLeft-with-zoom.html
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Standardized%20CSS%20zoom
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Standardized%20CSS%20zoom
Baseline status: https://webstatus.dev/?q=Standardized%20CSS%20zoom

Docs: https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit

Samples: https://jsbin.com/wasafateko/edit?html,css,js,output

View on chromestatus.com