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

@diligiant 

> 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 https://developers.google.com/web/updates/2017/09/visual-viewport-api#layout_viewport_vs_visual_viewport 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 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment-329809652 using your GitHub account

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