Re: [csswg-drafts] [css-variables] User Agent properties and variables


> I have the feeling `safe-area-inset-*` and `visualViewport` are tackling different issues

We agree!

If it's something that changes the size/position of the viewport, such as a keyboard, a URL bar, or a pinch-zoom, `visualViewport` is what you're looking for.

If it's something that obscures content but does not change the viewport, such physical screen shape, overscan, a picture-in-picture overlay, or an overlaying keyboard, the proposed solution is `viewport-fit` and `safe-area-inset-*`.

See for a description of the layout vs visual viewport. The iOS & Android keyboard changes the visual viewport, whereas the notch requires the user to adjust layout to move out of its way.

GitHub Notification of comment by jakearchibald
Please view or discuss this issue at using your GitHub account

Received on Friday, 15 September 2017 15:06:33 UTC