收藏
回答

CSS3动画,在IOS出现了跳帧和溢出的问题?

在写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 apply-time-water-png{
   from {transform: translateX(-15rpx);}
  to {transform: translatex(925rpx);}
}


最后一次编辑于  2019-10-23
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-10-23

    溢出的设置一下层级:,闪烁的这边再看下

    2019-10-23
    赞同
    回复 6
    • 泽锐
      泽锐
      2019-10-23
      好的
      2019-10-23
      回复
    • 泽锐
      泽锐
      2019-10-24
      你好,请问闪烁问题,有答案了吗?
      2019-10-24
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2019-10-25回复泽锐
      transform: translateZ(0);替换z-index试下
      2019-10-25
      回复
    • 泽锐
      泽锐
      2019-10-25回复社区技术运营专员-小柿子
      还是有问题欸
      2019-10-25
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2019-10-25回复泽锐
      那就没办法处理,是ios本身绘制的问题,不使用图片,直接使用view画试下
      2019-10-25
      回复
    查看更多(1)
  • 绿
    绿
    01-13

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

    01-13
    赞同
    回复
  • 夜子
    夜子
    2019-11-15

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

    2019-11-15
    赞同
    回复
登录 后发表内容
问题标签