Visual vs. Layout Viewport Demo

Use the viewport on the right to scroll and zoom around. The viewport on the left displays how the browser sees the two viewports. Note how the position: fixed navbar at the top behaves under pinch-zoom between implementations. Disclaimer: This is the result of my research and a crude demo, the behavior for implementations (particularily non-Chrome) may not capture all their subtleties.

What the browser sees

What the user sees

Use mouse to pan around (as if using a touch-screen). Hold shift to pinch-zoom in/out.

Chrome

The layout viewport is unchanged under pinch-zoom - the position: fixed bar does not follow the visual viewport when zoomed in.

Edge

Essentially the same model as Chrome. One major difference, not visible here, is that Chrome sizes the layout viewport to be the size of the visual viewport at minimum-scale. Edge sizes it to be the size of the visual viewport at scale=1. This means Edge's visual viewport can be larger than the layout viewport.

Firefox

Firefox does not distinguish between the visual and layout viewport. As the user pinch-zooms, the layout viewport shrinks with the visual viewport. The practical effect of this is that position: fixed elements stick to the visual viewport and there's no way to scroll them if they overflow the visual viewport.

Safari

Something of a hybrid. When the user first starts to pinch-zoom, the layout viewport shrinks along with the visual viewport so that the position: fixed element stays in the visual viewport. However, after crossing some threshold, the layout viewport stops scaling and only the visual scales. When scrolling, both viewports are scrolled at the same time proportionally.

Page Scale

Browser Implementation








Visual Viewport
Layout Viewport