Справочная атакация: Исправлена ​​не работать над Safari - Многочисленные разделы Решение - iOS 18.2 [Закрыто] ⇐ Html

[Anonymous]

Я пытаюсь создать простой эффект параллакса, когда фоновое изображение остается фиксированным, в то время как контент прокручивается над ним. Это прекрасно работает в браузерах для настольных компьютеров, но на сафари IOS 18.2 изображение либо сдвигается, выглядит пикселированным или не визуализированным < /p>
то, что я пробовал < /strong> < /p>

Используемый фоновый attachment: фиксированный на элементе секции. ниже).

Код: Выделить всё

Parallax iOS Test






Test Parallax




Test NO Parallax






* { margin: 0; padding: 0; box-sizing: border-box; }

.parallax {
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?w=1200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fHww');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.content { padding:8rem;
color: white;
}

.no-parallax {
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?w=1200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fHww');
background-size: cover;
background-position: center;
}

ожидаемое поведение [/b]
Фоновое изображение в разделе .parallax должно оставаться фиксированным на месте, в то время как прокрутки содержимого страницы наверх. https://i.imgur.com/dmc28qj.mp4
Как видите, у меня есть 3/4 разделов с этим типом фонового вложения. Решение с позицией: фиксированное не работает.

Подробнее здесь: https://stackoverflow.com/questions/796 ... s-solution