Вопрос или проблема
Я разрабатываю веб-сайт, который использует возможность CSS transform3D, позволяющую размещать div-элементы в 3D-пространстве с аппаратно-ускоренной 3D-преобразованием, таким как перспектива и масштабирование. Я использовал руководство Кита Кларка “Чистые CSS-параллаксные вебсайты” в качестве отправной точки, а также статью Medium от “Daily Fire”. Я модифицировал технику, чтобы разместить несколько слоев полноэкранных фоновых изображений на моем сайте, что создает очень классный эффект. Вы можете увидеть это в действии на моем личном веб-сайте.
Моя проблема в том, что, несмотря на все мои старания, эти очень большие фоновые элементы заставляют страницу прокручиваться за пределы моего основного контента в Chrome. Firefox и Safari без труда отображают эту страницу корректно. Chrome позволяет пользователю прокручивать страницу очень далеко за пределы нижней части моей веб-страницы, не соблюдая настройки переполнения.
Скриншот из Chrome:
Скриншот из Safari:
Вот некоторый псевдокод:
<body>
<div class="plxMainContain">
<div class="plxBgContain">
<div class="plxItem bg1"></div>
<div class="plxItem bg2"></div>
<div class="plxItem bg3"></div>
</div>
<div class="content">
<section>
(контент)...
</section>
</div>
</div>
</body>
/* Нудная текстовая часть */
html, body {
height: 100vh;
margin: 0;
overflow: hidden;
padding: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100vw;
}
.content {
-webkit-backdrop-filter: blur(0.33em) saturate(200%);
backdrop-filter: blur(0.33em) saturate(200%);
background: #111C;
border-top: 6px solid #ff0;
overflow: hidden;
position: absolute;
width: 100%;
}
.content section {
margin: 5em auto;
max-width: 900px;
position: relative;
width: 84%;
}
/* Контейнеры параллакса */
.plxMainContain {
bottom: 0;
height: 100vh;
left: 0;
margin: 0px;
overflow: hidden visible;
-webkit-perspective: 1px; perspective: 1px;
position: fixed;
right: 0;
top: 0;
-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
width: 100vw;
}
.plxBgContain {
bottom: 0px;
display: block;
height: 90%;
left: 0px;
overflow: visible;
position: relative;
right: 0px;
top: 0px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100vw;
}
/* Фоновые элементы */
.plxItem {
bottom: 0px;
display: block;
left: 0px;
position: fixed; /* если установить в absolute, это сломает WebKit */
right: 0px;
top: 0px;
}
.bg1 {
background-color: red;
width: 95%;
height: 95%;
-webkit-transform: scale(21) translateZ(-20px);
transform: scale(21) translateZ(-20px);
}
.bg2 {
background-color: blue;
width: 75%;
height: 75%;
-webkit-transform: scale(11) translateZ(-10px);
transform: scale(11) translateZ(-10px);
}
.bg3 {
background-color: green;
width: 65%;
height: 65%;
-webkit-transform: scale(6) translateZ(-5px);
transform: scale(6) translateZ(-5px);
}
Вот демонстрация на CodePen, которую я сделал, она показывает упрощенную версию того, что я пытаюсь сделать. Как вы можете видеть, это прокручиваемый документ, в котором контейнер фона (plxBgContain) содержит 3 слоя block div-ов разных цветов, все они смещены на разные значения z, чтобы создать иллюзию 3D-глубины. Этот эффект критически важен для моих дизайнерских целей.
Я надеялся, что кто-то со знанием дела сможет помочь мне понять, почему эта проблема происходит и как ее исправить.
Ответ или решение
Проблема с прерыванием прокрутки на веб-сайте в браузерах Chromium, возникающая из-за использования 3D CSS трансформаций, обычно связана с тем, как браузер обрабатывает элементы с фиксированным позиционированием и их отношение к DOM-дереву. Ваша реализация параллакса с использованием больших фонов может вызывать ненужные эффекты, в то время как другие браузеры, такие как Firefox и Safari, могут обрабатывать эти стили более корректно.
Вот несколько подходов к решению вашей проблемы:
1. Изменение позиции элементов фона
Вместо использования position: fixed для элементов фона (.plxItem), попробуйте установить position: absolute. Это может помочь обойти проблему с прокруткой. Однако вам нужно будет убедиться, что родительский элемент (.plxBgContain) имеет position: relative.
.plxBgContain {
position: relative; /* Измените на relative */
...
}
.plxItem {
position: absolute; /* Измените на absolute */
...
}2. Убедитесь, что высота правильная
Проверьте, правильно ли установлены высоты ваших элементов, особенно для родительских контейнеров, чтобы гарантировать корректное поведение прокрутки. Если контейнеры имеют слишком большие значения высоты или другие свойства, это может вызвать проблемы.
3. Использование overflow: hidden
Если вы хотите, чтобы фон не вызывал прокрутку, вы можете рассмотреть возможность применения overflow: hidden к родительским контейнерам, так же как это сделано у вас в .plxMainContain:
.plxMainContain {
overflow: hidden; /* Это необходимо для предотвращения прокрутки */
...
}Однако, учтите, что это может скрыть полезное содержимое, если оно расположено за пределами видимой области.
4. Устранение проблем с CSS свойствами
Иногда некоторые специфические CSS-свойства могут вызывать проблемы в определённых браузерах. Проверьте, нет ли конфликтов между свойствами transform, perspective, и backface-visibility. Экспериментируйте с их значениями или удалите, чтобы увидеть, исключает ли это проблему.
5. Замена или оптимизация 3D преобразований
Попробуйте упростить ваши 3D преобразования, убрав translateZ и заменив его на другие моменты. Браузеры могут по-разному обрабатывать translateZ, что иногда вызывает неправильные результаты.
6. Обновление браузера
Убедитесь, что у вас установлена последняя версия браузера Chrome. Иногда обновления могут содержать исправления для проблем с рендерингом и могут решить вашу проблему.
Заключение
В большинстве случаев, подобные проблемы могут быть решены изменением расположения элементов и правильной установкой значений свойств. Постепенно применяйте изменения и проверяйте, как это влияет на поведение страницы. Если проблема сохраняется, рассмотрите возможность создания альтернативного эффекта без использования фиксированных позиций или больших фоновых элементов.