为什么CSS动画(旋转)不能在ios15.4中工作

Question

我有一个SVG图标，我给它应用了一些CSS动画(旋转)，在SVG文件中使用内联CSS(下面您可以看到我的代码并运行代码片段)。

我的问题是，虽然动画在台式机和我的安卓手机上可以正常工作，但在某些iphone上却不能正常工作。

例如，我发现如果iPhone 11升级到iOS 15.4，它就不能工作，但如果它是在15.3版本。我也试过用15.3版本的iPad，它可以工作，但在升级到15.4之后，它就不能工作了。

是我遗漏了什么，还是这只是iOS 15.4的一个bug ?

谢谢!

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570" class="hero-slider__svg-animation" width="160">
<style>
.hero-slider__svg-animation {
-webkit-animation: heroSliderSvgAnimation 1s linear infinite;
animation: heroSliderSvgAnimation 1s linear infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes heroSliderSvgAnimation {
0% {
-webkit-transform: rotate(0);
-webkit-transform-origin: center;
}
}
@-webkit-keyframes heroSliderSvgAnimation {
100% {
-webkit-transform: rotate(360deg);
-webkit-transform-origin: center;
}
}
@keyframes heroSliderSvgAnimation {
0% {
transform: rotate(0);
transform-origin: center;
}
}
@keyframes heroSliderSvgAnimation {
100% {
transform: rotate(360deg);
transform-origin: center;
}
}
</style>
<path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>

Answer 1

最后，正如A Haworth所提到的，(360度)似乎有问题，但(359度)或(180度)以上的任何东西都不能很好地工作。

所以我将动画设置为旋转(-360度)，并将元素的动画方向设置为"反向"。

我再次发布更新后的代码片段。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570" class="hero-slider__svg-animation" width="160">
<style>
.hero-slider__svg-animation {
-webkit-animation: heroSliderSvgAnimation 1s linear infinite;
animation: heroSliderSvgAnimation 1s linear infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes heroSliderSvgAnimation {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
}
100% {
-webkit-transform: rotate(-360deg);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes heroSliderSvgAnimation {
0% {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
100% {
transform: rotate(-360deg);
transform-origin: 50% 50%;
}
}
</style>
<path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>

Answer 2

是的，在IOS 15.4中有一个bug，我们在使用transform属性时遇到了内容隐藏，所以为了克服这个问题，我们在CSS中添加了translate3d()