WXOPEN Club

IOS出现css动画闪烁

发布于 7 年前作者 xiachen15774 次浏览最后编辑 7 年前来自 ask

使用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>
3 回复
ujiang
ujiang1 楼6 年前

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

mzhao
mzhao2 楼6 年前

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

请问您是如何解决的呢？

另外，这行代码并不管用

-webkit-backface-visibility: hidden;
yanliu
yanliu3 楼5 年前

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

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

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