search

russellsamora / scrollama

Scrollytelling with IntersectionObserver.
https://russellsamora.github.io/scrollama/basic
MIT License
5.8k stars 277 forks source link

Scrollama sometimes eventing with inaccurate progress in Safari (even 12.1+) #103

Closed iDVB closed 5 years ago

iDVB commented 5 years ago

scrollama 2.1.2 macOS Safari 12.1.1

In every other way Safari has been working well with scrollama. However, we are now experiencing a show-stopper animation issue that only seems to happen when you quickly scroll up and down a few pixels.

Scenario: In Safari (Chrome and FF work fine), let's say you are zooming in on some text during scroll (gsap) if you zoom in and out slowly, everything works the charm. However, if you zoom to say progress 0.7 and then quickly scroll up and down a few pixels quickly.... the progress will suddenly spit out 0 before jumping back to 0.7.

Here is a video of the issue: https://www.screencast.com/t/SXJCLgBs3N

and is the code from that video: NOTE!: There seems to be a bug with codesandbox when you use scrollama in an iframe... so in order to properly test this example, you have to pop it out into a standalone browser. https://codesandbox.io/s/scrollama-safari-issue-dlus9

iDVB commented 5 years ago

-- UPDATE --

Turns out this is due to the fact that Safari has overscroll/bounce horizontally as well as vertical.... and since the scroll marker is only a 1x wide and left aligned pixel any time the page horizontally overscrolls.... the marker is off the screen and it jumps the progress.

The cure was to move the marker dead center in the window.

Woot!