Как исправить прыгающий параллакс в Safari (OSX)?

Question

[Илья Izumskee]

При прокручивании сайта в Safari (OSX) возникает баг с прыжками/подергиваниями элементов в параллаксе. В других браузерах такого не наблюдается.
Использую translateY + translateZ(0) для того, чтобы все корректно работало в IE9. Использую TweenMax + ScrollTo (GSAP) для плавного скроллинга. По сути все прекрасно работает, только Safari выдает "артефакты" в виде прыжков и скачков.

Кто-нибудь сталкивался с такой проблемой? Подскажите пожалуйста решение.

Заранее благодарен.

Comments

[Ольга Жижка]

Илья, скажите пожалуйста как Вы решили эту проблему, у меня похожая проблема, делаю параллакс просто переключением блоков с position fixed, но в сафари также все прыгает( Может что-то посоветуете, как Вы решили проблему

[Илья Izumskee]

Ольга Жижка: Ольга, насколько я помню проблема была в том, что очень много блоков (около 40) участвовало в параллакс анимации, браузеру было тяжело и я сократил это количество, объединив блоки.
Я не вижу того, что вы делаете, поэтому могу дать только общий совет. Используйте css transform: translateX/Y/Z для параллакса, вместо left/right/top/bottom (если вы это еще не сделали). Это производительнее. Также можете попробовать TweenMax от GSAP для параллакса, может быть это решит вашу проблему.

[Ольга Жижка]

Спасибо большое за ответ! Действительно мою ситуацию так в двух словах не опишешь. попробую воспользоваться Вашими советами.

Answer 1

[Дмитрий Филимонов]

А что используется для параллакса? left/top или translate/translate3d? Коротко: используйте только translate3d, со всем остальным действительно могут наблюдаться тормоза.

Ну и покажите код на jsfiddle, если не помогло. Вариантов может быть несколько, к тому же под параллаксом могут понимать разное.

Comments

[Илья Izumskee]

Дмитрий Филимонов использую translateY + translateZ(0) для того, чтобы все корректно работало в IE9. Использую TweenMax + ScrollTo (GSAP) для замедления скроллинга. По сути все прекрасно работает, только Safari выдает "артефакты" в виде прыжков и скачков.

[Илья Izumskee]

Вот здесь примерна похожая проблема
https://github.com/janpaepke/ScrollMagic/issues/210

[Илья Izumskee]

Также нашел такой ответ на stackoverflow, не уверен на 100% в правдивости этих слов, но все же.

This unfortunately isn't to do with your coding, but rather the browsers themselves, as Safari reacts to mouse scrolling very differently to Firefox and Chrome.
Firefox and Chrome track mouse scrolling throughout the scrolling process, which is what makes the Parallax effective.
However, with Safari, mouse scroll position isn't updated until the user has finished scrolling, which is what causes the jittery effect.
The only option is to disable the Parallax effect for Safari users