electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

Mobile top address bar & bottom navigation bar #43

Closed arsenx closed 5 years ago

arsenx commented 5 years ago

First i'd like to say this repo is awesome! I was testing it out and noticed an undesirable effect on on the mobile experience. So in safari or chrome on iOS there is an expanding top bar and a collapsing bottom bar which affect the viewport height. So during a change in scroll direction when they appear or disappear, it causes like a jank in the animation due to a "resize"

I tried looking up how to get the absolute viewport size on google for these devices but haven't found much yet.

I will try to fix it myself and submit a PR but if anyone experiences this it would be great to know :)

arsenx commented 5 years ago

Here's a quick video i made on my iPhone https://www.loom.com/share/037bf7393aff42f4a8f6ca4eb7f763b0

electerious commented 5 years ago

Hey @arsenx, I'm aware of this issue, but I don't know how to fix it. It's more or less the way mobile browsers/safari works and I don't think that there's a good way to work around it. Let me know if you find something!