Flickering when browser toolbar is shown/hidden about react-scroll-parallax HOT 2 OPEN

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.

from react-scroll-parallax.

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

from react-scroll-parallax.