CSS-преобразование не работает должным образом в Chrome - PullRequest
Новая
       58

CSS-преобразование не работает должным образом в Chrome

7 голосов
/ 30 октября 2019

Я переписал анимацию переворачивания страницы книги на основе Codrops в более легкую версию с меньшим количеством JavaScript. Моя анимация работает в Firefox (и Safari), как и нужно, но не в Chrome.

Нажав на правую половину изображения для следующего изображения, Chrome не показывает изображение на переворачивающейся стороне. В демонстрационных целях я установил background: red и создал div.helper-class-to-make-bug-visbile, чтобы сделать background: red видимым. Это происходит только в первый раз, когда изображение переворачивается. Когда я возвращаюсь и переворачиваю снова, анимация больше не отстает. Это раздражает, даже анимация отстает только на первом ходу.

Демо : https://codepen.io/pizzabote/pen/xxxXmXN

Как это исправить, чтобы анимация из демотоже работает в Chrome (переворачивание изображения в первый раз без задержки)? Или это ошибка в Chrome?

Я использую Chrome версии 78.0.3904.87 (Официальная сборка) (64-битная)) на macOS Мохаве. В Windows анимация в этой версии Chrome также не работает.

HTML-часть: 

<div class="container">
<div class="page" id="first">
    <div class="back">
        <div class="outer">
            <div class="content">
                <img src="img/1.jpg">
            </div>
        </div>
    </div>
</div>
<div class="page" id="second">
    <div class="front">
        <div class="outer">
            <div class="content">
                <img src="img/1.jpg">
            </div>
        </div>
    </div>
    <div class="back" id="third">
        <div class="outer">
            <div class="content">
                <div class="helper-class-to-make-bug-visbile">
                    <img src="img/2.jpg">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page" id="fourth">
    <div class="front">
        <div class="outer">
            <div class="content">
                <img src="img/2.jpg">
            </div>
        </div>
    </div>
</div>

CSS-часть: 

.container {
    width: 400px;
    height: 300px;
    position: relative;

    z-index: 100;
    -webkit-perspective: 1300px;
    perspective: 1300px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;

    width: 50%;
    height: 100%;
    left: 50%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

#first,
#first .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#first {
    z-index: 102;
}
#second {
    z-index: 103;
    transition: transform 0.8s ease-in-out;
}
#third .content {
    width: 400px;
}
#fourth {
    z-index: 101;
}

.page > div,
.outer,
.content,
.helper-class-to-make-bug-visbile {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page > div {
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.outer {
    width: 100%;
    overflow: hidden;
    z-index: 999;
}

/* problematic class: `.content` */
.content {
    width: 200%;
    background: red;
}


.front .content {
    left: -100%;
}
...