Question

在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/下找到

Answer 1

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

在iPad

1 个答案: