Flickering when browser toolbar is shown/hidden

[aland-x]

Bug

When using a mobile browser after scrolling the toolbar gets hidden and when scrolling back in the reverse direction the toolbar re-appears.

So when the toolbar gets hidden/shown the element that has the parallex effect flickers (probably due to re-calculation of the layout)

Here is a screencast that demonstrates the bug, from the examples provided in the story book.

video.mp4

[J Scott Smith]

Ya when the viewport height changes the progress of the animation changes since progress is determined by the element moving through the entirety of the viewport using window.innerHeight. There's a demo of this behavior in the docs which you may have seen.

So it's kind of an expected behavior. However there may be a solution using something like a 100lvh unit which would represent the large viewport size not including the toolbar. Or perhaps something with the Visual Vieport API since it would be preferred to get this value from a JavaScript API.

Need to look into this further.

[aland-x]

I was thinking about using window.visualViewport.height instead of window.innerHeight, because window.innerWidth does not change while the toolbar is in the process of getting hidden/shown. It only get's updated when the transition is fully done (e.g. the toolbar is fully shown / fully hidden).

But window.visualViewport.height updates also while the transition is happening (toolbar getting hidden/shown).

---

Update: it seems when scrolling fast enough window.visualViewport.height also does not get updated in real time until it is fully hidden