Как я могу избежать проблем с параллаксом?

Question

Как я могу избежать проблем с параллаксом?

1

Я пытаюсь создать эффект параллакса, но имею серьезные проблемы с производительностью в Edge и Safari. Кто-нибудь, пожалуйста, скажите мне, как я могу избежать этих проблем?

Пример: https://github.com/bashkos/Problem-parallax

Константин Башаркевич 02 июль 2017, в 16:11

Источник

2

Просто гуглите для webkit-backface-visibility: hidden; это обычно решает проблемы ..
Hardy 02 июль 2017, в 14:00
0

@ Hardy Спасибо за ответ, но в этом случае это не поможет
Константин Башаркевич 02 июль 2017, в 15:28

Теги:

javascript

performance

css

scroll

parallax

1 ответ

Ещё вопросы

Просто гуглите для webkit-backface-visibility: hidden; это обычно решает проблемы ..
@ Hardy Спасибо за ответ, но в этом случае это не поможет

lumio · Answer 1 · 2017-07-02T11-09-00.000Z

Используйте transform: translate(... ) вместо установки bottom и co. Настройка transform помогает, поскольку браузеры затем создают новый слой чертежа, который отделен от остальных.

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

Sidenote: Я думаю, вы имели в виду resize в window.addEventListener('recise',...)

Уже используй его github.com/bashkos/Problem-parallax/blob/master/assets/…
Ах, извините, я только видел bottom линию. Позвольте мне проверить еще раз
Хорошо, я понимаю, что вы имеете в виду. Когда я строил свой последний сайт по параллаксу, у меня была такая же проблема. Что я сделал, так это использовал position: fixed вместо position: absolute поскольку он все время находится в одной и той же позиции. Конечно, это делает ваши расчеты немного сложнее, я думаю,
Это также предполагает особую разметку макета, которая может быть сложной для контента сайта.
с position: fixed у меня проблемы с vsync, иногда я вижу белые полосы