search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

ScrollMagic Parallax Jitter in latest Safari and Firefox #817

Open aw-gdc opened 6 years ago

aw-gdc commented 6 years ago

Hi,

the default parallex_sections demo is jittering on latest Safari (11.1) and Firefox (61.0.1.) when content is scrolled.

http://scrollmagic.io/examples/advanced/parallax_sections.html

I use this effect on a website and the jittering really ruins the page. In Firefox it is not as bad as in Safari but still clearly recognizable.

See attached gif (Left Chrome runs smooth; On the right Safari) or higher res video here: https://www.youtube.com/watch?v=GwgMxGuIuFY

chrome

Any way to get rid of the jittering?

TY!

bansavage commented 6 years ago

Can confirm these results! Browser tech affects ScrollMagic :/

nitrokevin commented 6 years ago

Not sure if this is the reason, just a guess, but Safari is calculating the Y position to many more decimal places: transform: translate(0%, 67.34177215189874%). Whereas Chrome is calculating to 4 decimal places.

Now to me that should make safari smoother, but maybe it makes it jump around - wonder if there is a way to reduce the number of decimal places to test this out?

bansavage commented 6 years ago

Not sure if this is the reason, just a guess, but Safari is calculating the Y position to many more decimal places: transform: translate(0%, 67.34177215189874%). Whereas Chrome is calculating to 4 decimal places.

Now to me that should make safari smoother, but maybe it makes it jump around - wonder if there is a way to reduce the number of decimal places to test this out?

I have seen Chrome calculate to 2-6 decimal places. Still your point remains - this appears to be core issue with browsers.

tekfunk commented 5 years ago

Anyone figure out how to fix this? Client wants parallax but these jitters are unacceptable.

ghost commented 5 years ago

Hello any solution?

emoc11 commented 5 years ago

Hello

I still have the issue with Safari 13.0.2 ... Any way to have smooth parallax effect ?

Thank you

EDIT : Skrollr seems to do not have the same issue, if you can do the same it would be awesome ! Cause I need to use GSAP for my animation :) http://prinzhorn.github.io/skrollr/

bansavage commented 5 years ago

Following up, I have been using ScrollMagic in production for a year and I have accepted Safari's fate. I assume that the library code must be changed to detect Safari and adjust the parallax logic accordingly.

It seems that the "best" parallax occurs on Chrome and Firefox (both PC and Mac versions)