visualViewport Safari bug demo

This page demonstrates a visualViewport + on-screen keyboard + scrolling bug that is present on iOS/iPadOS.

Source code:
https://github.com/johncrim/bug-safari-vvp-scroll/

View on github pages:
https://johncrim.github.io/bug-safari-vvp-scroll/

Webkit bug report:
https://bugs.webkit.org/show_bug.cgi?id=226689

window.innerHeight:

visualViewport (updated every 500ms):



      

Repro steps (on iOS or iPadOS) :
  1. Edit this field to make the on-screen keyboard appear:
  2. Scroll down to bottom of viewport
  3. While scrolling up from bottom of viewport, leave finger on screen (while slowly dragging down to scroll). The Bug is that visualViewport resize events are occurring, and the visualViewport.height value is increasing while dragging, even though the height of the viewport is the same size.
  4. After releasing finger from scrolling up, notice that visualViewport.height changes to the correct value (matching the actual height of the layout viewport).

Expected behavior: visualViewport.height does not increase, and visualViewport.resize events are not raised, when the actual viewport is not changing size.

visualViewport last resize event:

        (none so far)