Open aland-x opened 6 months ago
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.
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
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.
https://github.com/jscottsmith/react-scroll-parallax/assets/116097436/347c4721-0b4d-4c78-81b4-7f609ecd9a3e