Чистый CSS-параллакс: несовместимая прокрутка между Firefox и Chrome - PullRequest
Новая
       60

Чистый CSS-параллакс: несовместимая прокрутка между Firefox и Chrome

0 голосов
/ 15 октября 2019

Я играл с созданием чистого CSS-эффекта параллакса с прокруткой (фон прокручивается медленнее, чем передний план с перспективой, transformZ и масштабированием).

Я был очень доволенрезультат (работает в Firefox), пока я не протестировал его в Chrome.

В Firefox я вижу именно то, что нужно: на экране отображается фон, который больше, чем область просмотра. При прокрутке фон перемещается медленно, а текст быстро перемещается в представление. Прокрутка заканчивается, когда нижняя часть фонового слоя выравнивается по нижней части области просмотра. Однако в Chrome (для настольных компьютеров и мобильных устройств) я могу прокручивать намного дальше вниз, смещая верхние слои и прокручивая фон, открывая пустую белую страницу позади.

К сожалению, я не понимаю, какие именноЭлемент настолько велик, что позволяет дальше прокручивать. Я просто хочу, чтобы прокрутка закончилась, когда достигнут конец фона. Кажется, что ни один другой слой не выходит за пределы фона.

Я настроил Пример минимальной задачи на CodePen . Там показано желаемое (подобное Firefox) поведение, но вы можете посмотреть его, скопировав два файла и протестировав в Chrome. 

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Minimal Problem Example</title>
        <link rel='stylesheet' type='text/css' href='parallax.css'>
    </head>

    <body>
        <div class='parallaxisWrapper'>
            <div class='parallaxisGroup'>
                <div class='layer personalInfo-layer'>
                    This text should scroll up into the viewable area
                </div>

                <div class='layer backimage-layer'>
                </div>

            </div>
        </div>
    </body>

</html>

/*
   CSS Reset
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/*
My example starts here
*/

.parallaxisWrapper {
    /* fill screen vertically */
    height: 100vh;
    /* allow only vertical scrolling */
    overflow-x: hidden;
    overflow-y: auto;
    /* shift the perspective to allow for parallax scrolling effect
        (perspective - distance) / perspective = scaleFactor
        distance is defined from zero layer, closer objects have to be scaled down and smaller have to be scaled up
    */
    perspective: 4px;
}

.parallaxisGroup {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

[class$='-layer'] {
    /* position all parallax layers absolutely */
    position: absolute;
}


.personalInfo-layer {
    /* keep in the default distance to scroll normally */
    transform: translateZ(0) scale(1);
    width: 80vw;
    height: 55vh;
    left: 10vw;
    top: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10vh;
}

.backimage-layer {
    /* transform to the back to scroll slower and adjust scale */
    transform: translateZ(-20px) scale(6);
    background: url(http://placekitten.com/1000/1000) no-repeat center fixed;
    background-size: cover;
    background-attachment: scroll;
    width: 100vw;
    /* adjust background layer width and top anchor to cover the full scrollable background of the upper layers */
    height: 116vh;
}

Пожалуйста, не смущайтесь CSSСбросить код в начале. Это просто скопированный стандарт. Кроме того, некоторые слои могут показаться вам излишними. Однако это версия моей реальной страницы.

Любой намек на то, что может вызвать такое поведение или как сделать впечатление совместимым от Firefox до Chrome, будет очень признателен!

...