旋转元素position:absolute, 添加rotate() 且超出视觉范围 的时候,依然有动画闪烁问题 机型:xr ios13.2 微信浏览器7.0.8 尴了个尬 拿同事的手机 xr ios13.1.3 没有这个问题
IOS出现css动画闪烁使用css3动画时,在IOS真机上出现闪烁。 目前发现闪烁是有前提因素的,就是css动画的View是使用“position: absolute;”并超出视觉区域的就会出现闪烁。 [代码].box{[代码][代码] [代码][代码][代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码][代码][代码]height[代码][代码]: [代码][代码]600[代码][代码]rpx;[代码][代码] [代码][代码][代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码] [代码] position: relative;[代码] [代码]}[代码] [代码].animation,.animationB{[代码][代码] [代码][代码][代码][代码]width[代码][代码]: [代码][代码]550[代码][代码]rpx;[代码][代码] [代码][代码][代码][代码]height[代码][代码]: [代码][代码]550[代码][代码]rpx;[代码][代码] [代码][代码][代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码] [代码][代码][代码][代码]right[代码][代码]:[代码][代码]-200[代码][代码]rpx;[代码][代码] [代码][代码][代码][代码]top[代码][代码]:[代码][代码]-200[代码][代码]rpx;[代码][代码] [代码][代码]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[代码][代码]>[代码]
2019-11-27