CSS转换在Chrome中无法正常工作

Question

我已经将基于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中的错误？

我在macOS Mojave上使用的是Chrome版本78.0.3904.87（正式版本）（64位）。在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>
</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%;
}

Answer 1

那么发生了什么事？

背面可见度

发生这种情况是因为您已backface-visibility设置.page > div, .outer, .content, .helper-class-to-make-bug-visbile为hidden。一个简单的设置visible即可修复它。

这是功能代码：

let prev = document.getElementById("prev");
let next = document.getElementById("next");

prev.addEventListener("click", prevImg);
next.addEventListener("click", nextImg);


let second = document.getElementById('second');

function prevImg() {
    second.style.msTransform = "rotateY(0deg)";
    second.style.webkitTransform = "rotateY(0deg)";
    second.style.transform = "rotateY(0deg)";
}
function nextImg() {
    second.style.msTransform = "rotateY(-180deg)";
    second.style.webkitTransform = "rotateY(-180deg)";
    second.style.transform = "rotateY(-180deg)";
}

body {
    margin: 4em;
}

.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: visible;
    backface-visibility: visible;
}

.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%;
}



/* controls */
#prev, #next {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 999;
}
#prev:hover, #next:hover {
    background: rgba(0,0,0,0.05);
    cursor: pointer;
}
#prev {
    top: 0;
    left: 0;
}
#next {
    top: 0;
    left: 50%;
}

<div class="container">
    <div class="page" id="first">
        <div class="back">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="second">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/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="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="fourth">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg">
                </div>
            </div>
        </div>
    </div>

    <div id="prev"></div>
    <div id="next"></div>
</div>

运行该片段即可看到问题从宇宙表面消失了！