Параллакс Javascript тормозит на Mac
Я сделал страницу параллакса, где фоновое изображение изменено с помощью JS.
translateY(- ... px)'
то же, что и на веб-сайт пожарной охраны.
На винде работает нормально, плавно. Однако на macOS плавно работает только в Safari. Все остальные браузеры тормозят, тормозят, и я не смог найти ответ. Я пробовал переход CSS, но это не помогло. Почему параллакс firewatch отстает? Я кодировал в соответствии с руководством это
@Mathyn Я попробовал Firefox для разработчиков, Chrome для Windows. У Windows высокая производительность = i7, а у Mac конец 2015 года = i5.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте добавить will-change: transform; transform: translate3d(0, -...px, 0) в свой css и внедрить requestAnimationFrame в свой js. Подробнее здесь.
Это не совет, относящийся к iOS, но он может улучшить производительность и плавность анимации, и, возможно, этого улучшения достаточно, чтобы сделать вашу анимацию плавной. Иногда iOS не слишком хорошо реагирует на анимированные преобразования.
Спасибо за подсказку. Вроде стало ровнее, но скачки все равно видны. Мой код такой же, как stephanieogaygarcia.com/blog/creating-a-parallax-effect, этот codepen в основном мой код codepen.io/stephanieogaygarcia/pen/zLvPoB
Вы должны включить использование графического процессора в браузере, замените translateY(...) на transform: translate3d(0, ..., 0). Это заставит браузер использовать графический процессор для рендеринга, и он должен работать более плавно.
Спасибо за совет, однако он делает то же самое. Мой код такой же, как этот stephanieogaygarcia.com/blog/creating-a-parallax-effect, этот codepen в основном мой код codepen.io/stephanieogaygarcia/pen/zLvPoB
Какие браузеры вы тестировали в Windows? Используете ли вы для тестирования ту же машину или аналогичное оборудование? Также, пожалуйста, не забудьте поделиться минимальным примером вашего кода, демонстрирующего эту проблему.