W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2017

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

From: Jake Archibald via GitHub <sysbot+gh@w3.org>
Date: Fri, 15 Sep 2017 15:06:40 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-329809652-1505487990-sysbot+gh@w3.org>
@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

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:43 UTC