Использование 3D-преобразований CSS для больших фоновых элементов предотвращает переполнение прокрутки в браузерах Chrom ⇐ CSS

[Anonymous]

Я разрабатываю веб-сайт, использующий преимущества функции CSS Transform3D, которая позволяет мне размещать элементы управления в трехмерном пространстве с помощью аппаратного ускорения трехмерного преобразования, такого как перспектива и масштабирование. В качестве отправной точки я следовал руководству Кита Кларка «Веб-сайты с параллаксом на чистом CSS», а также статье Medium из «Daily Fire». Я изменил эту технику, чтобы позволить себе размещать на своем веб-сайте несколько слоев полноэкранных фоновых изображений, что дает очень крутой эффект. Вы можете увидеть это в действии на моем личном веб-сайте.
Моя проблема в том, что, несмотря на все мои усилия, эти очень большие фоновые элементы заставляют страницу прокручиваться за пределы моего основного контента. в Хроме. Firefox и Safari без проблем корректно отображают эту страницу. Chrome позволяет пользователю прокручивать нижнюю часть моей веб-страницы, вместо того, чтобы соблюдать мои настройки переполнения.
Снимок экрана из Chrome:


Снимок экрана из Safari:
[img]https: //i.sstatic.net/z1OB94S5.png[/img]

Вот псевдокод:

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

(content)...

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

/* Boring text stuff */
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%;
}

/* Parallax containers */
.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;
}

/* Background elements */
.plxItem {
bottom: 0px;
display: block;
left: 0px;
position: fixed; /* if set to absolute, breaks WebKit, too */
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 слоя блоков div разных цветов, смещенных с разными значениями z, чтобы создать иллюзию трехмерной глубины. Этот эффект имеет решающее значение для моих целей дизайна.
Я надеялся, что кто-нибудь опытный поможет мне понять, почему возникает эта проблема и как ее исправить.

Подробнее здесь: https://stackoverflow.com/questions/790 ... overflow-i