Contact emails andr...@chromium.org
Explainer https://github.com/w3ctag/design-reviews/issues/706#issuecomment-1082421111 https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ Specification https://drafts.csswg.org/css-values-4/#viewport-relative-lengths Summary Support for sv* units, lv* units, dv* units and the logical vi/vb units. Blink component Blink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> Motivation Mobile browsers today typically have UI elements which dynamically hide themselves when the user scrolls the page (e.g. the top URL bar on Android). This presents a challenge to authors wishing to size and position something relative to “the viewport”, since there can be multiple definitions of “the viewport” depending on the state of these dynamic UI elements. The new viewport units allow authors to size/position elements according to the viewport appropriate for their use-case: - Small: the viewport as it would be with dynamic UI fully expanded. - Large: the viewport as it would be with dynamic UI fully contracted. - Dynamic: the viewport as it is according to the current state of the dynamic UI. The new viewport units are also part of Interop 2022 <https://web.dev/interop-2022/#new-viewport-units>. TAG review https://github.com/w3ctag/design-reviews/issues/706 TAG review status Closed with no issues. Risks Interoperability and Compatibility - The viewport units are sized relative to the initial containing block <https://www.w3.org/TR/CSS21/visudet.html#containing-block-details>, and different browsers resize the initial containing block in different situations. In particular, opening/closing the virtual keyboard will resize the ICB in Chrome for Android and Firefox for Android, but not in Safari for iOS nor in Chrome for ChromeOS. See also Intent to Ship: Android OSK resizes visual viewport by default + <meta> opt-out <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/32f2f64f-c49c-4208-b9b9-bd480e64d523n%40chromium.org?utm_medium=email&utm_source=footer> . Gecko: Shipped/Shipping ( https://www.mozilla.org/en-US/firefox/101.0/releasenotes/) WebKit: Shipped/Shipping ( https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5) Web developers: “Difficulties dealing with viewport sizing are prominent in both the MDN Browser Compatibility Report 2020 and the new State of CSS 2021 survey.” [1] <https://web.dev/interop-2022/#new-viewport-units> Other signals: WebView application risks N/A Debuggability No special DevTools support is needed. Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ? Everything that can be tested with WPTs is covered. However, it’s impossible to control dynamic UI elements from a WPT. Flag name CSSViewportUnits4 Requires code in //chrome? False Tracking bug https://bugs.chromium.org/p/chromium/issues/detail?id=1093055 Estimated milestones M108 Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5170718078140416 -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUpTFX6UBBt8r3fLKNd8LiatXxmgQvtpVF4rGh9NOU%3D8GA%40mail.gmail.com.
