Параллакс Javascript отстает на Mac

Question

Я сделал страницу параллакса, где фоновое изображение изменяется с помощью JS

translateY(- ... px)' 

То же, что и на сайте FireWatch .

В Windows работает нормально, плавно. Тем не менее, на MacOS это работает гладко только в Safari. Все остальные браузеры работают медленно, я не смог найти ответ. Я пробовал переход CSS, но это не помогло. Почему параллакс firewatch отстает? Я кодировал согласно этому руководству

Answer 1

Вы должны разрешить браузеру использование графического процессора, заменив translateY(...) на transform: translate3d(0, ..., 0).Это заставит браузер использовать графический процессор для рендеринга, и он должен работать более плавно.

Answer 2

Попробуйте добавить will-change: transform; transform: translate3d(0, -...px, 0) к вашему css и внедрить requestAnimationFrame к вашему js. Подробнее здесь .

Это не выпущенный iOS совет, но он может улучшить производительность и плавность анимации, и, возможно, этого улучшения достаточно, чтобы сделать вашу анимацию гладкой.Иногда iOS не слишком хорошо реагирует на анимированные преобразования.