WebKit Visual Viewport API Bug

WebKit has a bug where, when pinch-zooming, the results of visualViewport.width × visualViewport.scale and visualViewport.height × visualViewport.scale do not correspond to the unzoomed visual viewport's width and height.

QR-Code of this page for easier testing on mobile:

When is this important?

When you have a fixed element that you place within the boundaries of the unzoomed visual viewport, so that it is never overlapped by the soft keyboard (like svh, but also factoring in the keyboard).

Pinch-zooming in WebKit results in jumping and wiggling of that element during the zoom process, as Visual Viewport API data used for positioning calculations is inaccurate.

While pinch-zooming, this fixed positioned dialog and its contents should not jump or wiggle around, but be rock stable. Placement is done via --width and --height:

…which are being updated via JavaScript:

Focus this input to trigger the keyboard and resize the dialog:

Readings & Calculations:

Visual Viewport

visualViewport.width:
visualViewport.height:
visualViewport.scale:

Layout Viewport

window.innerWidth:
window.innerHeight:

Calculated unzoomed Visual Viewport

visualViewport.width × visualViewport.scale (should always be window.innerWidth / ):

visualViewport.height × visualViewport.scale: