CSS3动画，在IOS出现了跳帧和溢出的问题？
发布于 6 年前 作者 fang31 4272 次浏览 来自 官方Issues

在写CSS3动画时，放在IOS苹果机子上，会出现图层溢出和跳帧现象。代码链接：https://developers.weixin.qq.com/s/Qplg8kmt7dcZ

body{
  /*position: flex;*/
  width: 100%;height: 100%;
  /*overflow: hidden;*/
}
.ktdm-apply-takename{
  width: 100%;height: 1150rpx;
  background-color: #F0F0F0;
  z-index: 1;
}
/*制作出球形div*/
.ktdm-apply-takename-time{
  width: 474rpx;height: 474rpx;
  margin: 0 auto;
  position:relative;
  border-radius: 50%;
  top: 80rpx;
  overflow: hidden;
  text-align: center;
}
/*水球图片*/
.apply-time-image{
  width: 495rpx;height: 495rpx;
}
.ktdm-apply-takename-blq{
   width: 500rpx;height: 500rpx;
   position: relative;
   left: -14rpx;
   text-align: center;
}
.apply-time-water{
  width: 500rpx;height: 500rpx;
  border-radius: 50%;
  position:relative;
  top: -250rpx;
  /*background-color: red;*/
}
.apply-time-water-png{
  width: 2100rpx;height: 300rpx;
  position: absolute;
  top: -30rpx;
  right: 0;
  animation: apply-time-water-png 6.2s linear infinite;
}
[@keyframes](/user/keyframes) apply-time-water-png{
   from {transform: translateX(-15rpx);}
  to {transform: translatex(925rpx);}
}
3 回复

溢出的设置一下层级：

，闪烁的这边再看下

请问跳帧的现象最后解决了么？

我也遇到了这个问题，我的解决方法是在执行动画导致图层溢出的元素外再包一层父元素，注意父元素不能设置动画，给父元素设置层级和transform:translateZ(1000px)，我试过设置translateZ(0)，不起作用，我就往大了设，结果就有效果了，希望对你有用

回到顶部