iPad上闪烁的CSS动画答案

【问题标题】：Flickering css animations on iPadiPad上闪烁的CSS动画
【发布时间】：2017-09-23 22:11:34
【问题描述】：

在https://infopoint.promosi.de/pharmatechnik/ixos-4-circle/ 上，我有一些 css3 动画打开内容框，点击圆圈的各个部分。动画是这样构建的：

.toggle-box.slide-in-elliptic-right-fwd {
opacity: 1;
-webkit-animation: slide-in-elliptic-right-fwd 0.7s cubic-bezier(.25, .46, .45, .94) both;
animation: slide-in-elliptic-right-fwd 0.7s cubic-bezier(.25, .46, .45, .94) both;
-webkit-backface-visibility: hidden;

}

@keyframes slide-in-elliptic-right-fwd {
0% {
    -webkit-transform: translateX(500px) rotateY(-30deg) scale(0);
    transform: translateX(500px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: 0 200%;
    transform-origin: 0 200%;
    opacity: 0
}
100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -850px 50%;
    transform-origin: -850px 50%;
    opacity: 1
}
}

如您所见，我已经尝试使用 -webkit-backface-visibility: hidden;但闪烁仍然存在。

任何提示如何摆脱它们？

编辑：同时我添加了以下规则：

.toggle-box div {
-webkit-backface-visibility: hidden; 
}
.toggle-box {
  -webkit-backface-visibility: hidden; 
  -webkit-transform: translateZ(0);
}
body {-webkit-transform: translateZ(0);}

这让事情变得更好，但仍然不完美。右侧的方框仍在闪烁。

我的页脚导航现在有问题，它的位置：固定，并且至少在 iPad 上初始加载时它在那里，但再次上下滚动使其消失。而且，在页面加载时，我有一个加载屏幕，它会在一段时间内显示结果页面的标题。就像那样，这不是一个解决方案，我现在被困住了。

我也试过了

-webkit-tranform: translate3d(0,0,0)

但这并没有改变我最近描述的错误。

我必须用于从另一个网站获得的 css 动画的代码。它们对于圆形动画具有相同的 css（没有我尝试过的这种解决方法）并且没有闪烁。但是我看不出区别，也没有任何想法了。原圈可以在https://www.pharmatechnik.de/digitale-apotheke/下找到

【问题讨论】：

标签： css

【解决方案1】：

一切都回来了 :) 解决方案是在页脚中找到的，而不是在动画框中。固定页脚的 css 声明出了点问题，现在一切正常。干杯，乔

【讨论】：