Summary: Mobile web pages contain two viewports, the layout viewport and the visual viewport. The layout viewport consists of all the page contents and is specified by the meta-viewport tag. The visual viewport is the actual visible portion of the page on the screen excluding on-screen keyboards, areas outside of a pinch-zoom area or any other on-screen artifact that does not scale with the dimensions of the page. The purpose of the Visual Viewport API is to allow web developers to explicitly query the properties of the visual viewport.
Web developers can use this API in situations where they need to position web page elements to remain visible on the screen regardless of the visible portion of the web page. For example, if an image needs to be visible regardless of the pinch-zoom level of the device, it can be positioned relative to what’s shown on the screen using methods of the Visual Viewport API. Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1357785 Link to standard: https://wicg.github.io/visual-viewport <https://wicg.github.io/visual-viewport/#the-visualviewport-interface> Platform coverage: Available on both Android and Desktop. However, the API will be useful on desktop after desktop pinch zooming has been implemented. Without pinch zooming, there is no difference between the visual viewport and the layout viewport. Estimated release: In Firefox 63, we will release the API without event handler attributes behind a pref. The event handlers onresize and onscroll may be pushed to a later release. The timeline for enabling it by default has not been decided yet. Preference behind which this will be implemented: dom.visualviewport.enabled Is this feature enabled by default in sandboxed iframes? Yes If allowed, does it preserve the current invariants in terms of what sandboxed iframes can do? Yes DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1477829 Do other browser engines implement this? Shipped: Chrome 61 ( https://bugs.chromium.org/p/chromium/issues/detail?id=635031) Opera 48 ( https://www.chromestatus.com/feature/5737866978131968) In development: Safari ( https://webkit.org/status/#feature-visual-viewport-api) web-platform-tests: Test suite: https://searchfox.org/mozilla-central/source/testing/web-platform/meta/visual-viewport Currently, these tests are expected to fail as the Visual Viewport API has not been implemented yet. Bug to enable tests: https://bugzilla.mozilla.org/show_bug.cgi?id=1477610 Secure contexts: Yes _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
