[csswg-drafts] [css-viewport] How to determine minimum-scale and layout viewport size? (#9004)

bokand has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-viewport] How to determine minimum-scale and layout viewport size? ==
This only applies to mobile UAs.

There are four important boxes to understand here:

- Initial containing block (comes from combination of device size and <meta> tag)
- layout viewport - containing block for `position: fixed` elements, scrolling box for `documentElement`
- visual viewport - what the user can actually see
- "minimum-scale-box" - the viewport when zoomed out to the minimum scale factor

(AFAIK Firefox and Chrome are aligned on behavior, see https://github.com/bokand/bokand.github.io/issues/3)

Unfortunately it's not specified anywhere how to compute the layout viewport size or minimum-scale-box and Safari and Chrome behave differently in edge cases where the meta tag doesn't specify a minimum-scale (or it's smaller than the UA limit or would exceed document bounds)

Chrome's behavior:

- Measure the document bounds after a layout. Clamp the minimum scale factor to a value such that the visual viewport can never exceed the document bounds width. (i.e. the meta tag can make this value larger but not smaller)
- Size the layout viewport to the minimum-scale-box

From my testing, Safari's typical behavior:

- Clamp the minimum scale factor to a value such that the visual viewport cannot exceed the ICB size
- Size the layout viewport to the ICB

In Chrome, the layout viewport's size depends on content which has been problematic. I'd like to fix this and improve interop with Safari by switching to the above Safari behavior ([crbug/1454207](https://crbug.com/1454207)).

However, Safari appears to have some quirks in this area I don't understand; it too sometimes displays similar content-dependent behavior. I've captured some of my testing in [this doc](https://docs.google.com/document/d/1bcah-oxKgVBtXaFV3QZaeNkUhwkxvtoTe0zF_O5oA68/edit?usp=sharing). @smfr - could you help explain what's Safari is doing?

I'm hoping we could align implementations and spec a more predictable and rational behavior (hopefully by default, if web compatible).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9004 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 June 2023 21:34:35 UTC