Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clarify minimum-scale expansion for ICB vs. layout viewport #19

Open
skobes-chromium opened this issue Aug 23, 2022 · 2 comments
Open

Comments

@skobes-chromium
Copy link

The ICB explainer currently suggests that the ICB matches the size of the layout viewport, modulo UA UI shrinkage. That's not really correct, at least for mobile Chrome it is easy to reproduce a layout viewport much larger than the ICB:

https://output.jsbin.com/meyexut/quiet

Screenshot 2022-08-23 4 49 59 PM

A clearer statement would be:

  • The ICB is sized to match the visual viewport at pinch-zoom scale == 1.0
  • The layout viewport is sized to match the visual viewport at the minimum pinch-zoom scale

The minimum pinch-zoom scale is influenced by two things:

  • the minimum-scale parameter in the meta viewport tag
  • the extent of content overflow (zooming out can't reveal space that isn't occupied by content)

The minimum-scale default is really small and it's pretty common to have horizontal overflow from fixed-width elements, so you actually see LV >> ICB frequently on the web.

@skobes-chromium
Copy link
Author

Oops my "clearer statement" is also wrong.

  • The ICB is sized to match the visual viewport at pinch-zoom scale == 1.0

^ this is only true when the meta viewport has width=device-width. Otherwise it's sized to the declared meta viewport width, or to 980px if there is no meta viewport tag.

@skobes-chromium
Copy link
Author

I made a draft of a doc that tries to explain all of this:

https://docs.google.com/document/d/1FoAGu2grMAnUDgEfLAvALsdDTekstpxb-eeGUhCYTUk/edit

I'll try to make some PRs to update the explainers in this repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants