公告列表
公告列表
收藏
回答

IOS出现css动画闪烁

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS 12.2 iPhone 6 7.0.3



使用css3动画时，在IOS真机上出现闪烁。

目前发现闪烁是有前提因素的，就是css动画的View是使用“position: absolute;”并超出视觉区域的就会出现闪烁。


.box{
    width: 100%;
    height: 600rpx;

    overflow: hidden;

   position: relative;

}
 
.animation,.animationB{
    width: 550rpx;
    height: 550rpx;
    position: absolute;
    right:-200rpx;
    top:-200rpx;

    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

   background:#000;

   animation: rotate 2s infinite forwards linear;

}

.animationB{

   animation: rotate-opposite 3s infinite forwards linear;

}


@keyframes rotate {

  100% {

    transform: rotate(360deg);

  }

}


@keyframes rotate-opposite {

  100% {

    transform: rotate(-360deg);

  }

}

<view class="box">
<view class="animation"></view>
<view class="animationB"></view>
</view>



回答关注问题邀请回答
收藏

4 个回答

  • 樹袋大熊
    樹袋大熊
    2019-05-19

    你好，遇到了相同的问题。

    请问您是如何解决的呢？


    另外，这行代码并不管用

    -webkit-backface-visibility: hidden;
    2019-05-19
    有用 3
    回复
  • 柠檬微酸℃
    柠檬微酸℃
    2022-01-14

    为啥我的是安卓和ios都会偶尔闪，难受，还找不到方法解决

    2022-01-14
    有用
    回复
  • 仲
    仲
    2019-11-27


    旋转元素position:absolute， 添加rotate() 且超出视觉范围 的时候，依然有动画闪烁问题

    机型：xr ios13.2  微信浏览器7.0.8

    尴了个尬 拿同事的手机 xr ios13.1.3 没有这个问题


    2019-11-27
    有用
    回复 3
    • 仲
      仲
      2020-01-19
      今天又碰到闪烁的问题： 两部XS max ，微信版本 系统版本 都一致  其中有一部 微信里的所有动画都有问题（还没开始就结束了的那种）， 无解！！
      更怪异的事情 两部手机在safari却没有闪烁的问题，各位觉得 问题出在哪里
      2020-01-19
      赞
      回复
    • s1mple
      s1mple
      2021-09-24
      兄弟，找到原因了没。网上所有给css加属性的方法都试过了，闪烁还是偶尔出现。人都麻了
      2021-09-24
      赞
      回复
    • 粥
      粥
      2022-06-20回复s1mple
      兄弟解决没
      2022-06-20
      赞
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-03-21

    请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2019-03-21
    有用
    回复 12
    查看更多(7)
请 登录 后发表内容
相关文档