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>

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

所以发生了什么事？

原因1（仅是滞后）

我假设您的问题是关于在加载密码笔页面后加载图像需要一段时间的事实。这是预料之中的，因为图像是媒体，并且将它们推迟加载，直到最大内容绘画（LCP）。阅读有关它的更多信息here（或跳到显示图像已加载到LCP here的部分）。[深入研究，Chrome浏览器说1.jpg的加载时间为1.43秒-哇！ 2.jpg的加载未完全包含在下面的屏幕截图中，花了1.66秒-甚至更糟！ 2.jpg的加载时间更长，因为在1.jpg之后引用了它。

总之，由于图像是大文件，并且需要外部引用（例如：不是内联SVG，将在后面说明），因此图像加载时间很长。另外，Codepen已经花了很长时间加载，因为它的页面很沉重-并不是我在抱怨，因为它[[is

一个了不起的在线代码编辑器...

那你该怎么办？

[好吧，Codepen延长了整个页面的加载时间，因此，如果您在本地主机上运行此代码，或者仅将其作为C：/文件（硬盘中的.html文件）运行，则加载速度会更快。如果下载了图像，然后将它们与.html文件放在同一目录中，则图像本身也将加载得更快。或者，您可以将.jpg转换为.svg，然后在代码中将其替换为inline SVGs-但不建议这样做，因为这会使整个页面的加载速度变慢。另外，不能保证您的代码甚至可以内联处理SVG文件，因此不建议这样做，除非进行了广泛的测试以查看是否节省了绘制时间。

非常…

唯一可以使图像更快加载的方法就是将其从Codepen上取下，然后将代码（以及图像）放入硬盘驱动器的文件中。

这里，看看它如何在StackOverflow上加载：

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



/* 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>

有趣的事情...（鼓膜虫）

我发现的另一件事是，出于某些（非常奇怪的）原因，tympanus.net在一天中的某些时间未加载大约10到15秒。在撰写本文时，图像会在可接受的时间内正确加载，但在其他时间，它们会花一些时间加载。这很可能是由太多的TCP引起的，但这无关紧要。如果有人不满意，可以查看here了解更多详细信息。
需要更多帮助吗？在评论中告诉我！
希望这会有所帮助（对我的迟到表示抱歉，Bobbay）>>