CSS动画(transform: rotateY(180deg);)工作完美，除了Chrome和iOS

Question

老用户，第一次发帖

动画在PC和iPhone firefox/Safari上工作完美，但在iPhone Chrome上不行。(汇报)。

动画只是在动画持续时间结束后出现在结束位置。我确实得到了它的工作短暂，但我认为这是由于它缓存了一个旧版本的CSS。我不确定哪一个或者哪一个不一样。关键是我知道这行得通。

非常感谢任何帮助。我尽我所能清理了代码。工作代码到处都有注释。代码中还有一些内容，但这是它的核心。

也运行Bootstrap4 for info.

$(".flip-card-inner").on('click mouseenter', function () {
// $(this).css("animation-play-state", "initial"); // pause Y axis rotate
// $(this).css("animation-play-state", "paused");
$("div.link").each(function(index) {
$(this).delay(150*index).slideDown("fast");
$(".flip-card-inner").addClass('fliptoback');

});
});

body {
height:100vh; 
background-color: #3a4757;
background-image: url("img/grey_wash_wall.png");
background-blend-mode: hard-light;
background-size: 25%;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 200px;
border-radius: .7rem ;
border-color: black;
-webkit-perspective: 500px;
perspective: 500px;   
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
-webkit-transition: -webkit-transform; 
transition: transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #181E25;
background-image: url("img/brushed.jpg");
background-blend-mode: multiply;
background-size:25%;
border-radius: .7rem ;
border-color: #181E25;
color: white;
}

/* Style the back side */
.flip-card-back {
background-color: #181E25;
background-image: url("img/brushed.jpg");
background-blend-mode: multiply;
background-size:25%;
border-radius: .7rem ;
border-color: #181E25;
color: white;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.fliptoback{
animation-name: yaxis;
animation-duration: .5s;
animation-fill-mode: forwards; 
}
@keyframes yaxis {
from   {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
} 
to {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-card">
<div class=" flip-card-inner" >
<div class=" flip-card-front" >
<p>this is the front</p>
</div>
<div class=" flip-card-back" >
<p>this is the back</p>
</div>
</div>
</div>
<div class="brandbox">
<h3 class="text-center text-light font-weight-light mt-3 text-uppercase">BRAND</h3>
</div>

<div class="link text-light border border-light text-uppercase">
Website
</div>

Answer 1

Chrome重启。现在工作正常。我想尖叫。

Answer 2

我在使用CSS关键帧动画时也有同样的问题。这似乎是Chrome iOS的一个漏洞，并且已经被发现了至少3-4年。

已报告的问题行为表示，当您离开有问题的页面，打开另一个页面，重新加载该页面并返回到有问题的页面时，动画会中断，然后出现问题。
另一个确认的行为是，在重置Chrome实例并打开有问题的页面后，问题不存在。这个问题已经被确定为"UIViews快照"。(见下面的链接)。

链接到相关的StackOverflow帖子:移动版chrome的动画滞后

问题1231712:在移动设备chrome浏览器上切换标签页后，CSS转换延迟/jank
Issue 899130: CSS Transitions停止工作
第一个Chromium链接包含另一个bug报告链接:
bug 228333 - [iOS] CSS转换转换在快照其他uiview后变得janky，
其中声明该bug据称已在2023年1月初修复
这里高亮显示的修复:[iOS] CSS转换转换在快照其他uiview后变得janky #8394

我在2023年1月28日更新iOS上的Chrome后仍然存在这个问题。我希望它能很快修好。