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

那么发生了什么？

背面可见性

发生这种情况是因为您将.page > div, .outer, .content, .helper-class-to-make-bug-visbile 中的backface-visibility 设置为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>

运行 sn-p 以查看从宇宙表面消除的问题！