bug 记录 - animation 在 IOS机型掉帧情况

发现问题

  • 在做一个悬浮动画效果时,测试人员提出一个问题。
  • 在 IOS 机型上,动画效果有掉帧不流畅的现象。在安卓机型没有问题。

问题代码

  • 想要的效果是:以随机角度出现,小幅度缩小淡入,向上飘动并放大最后淡出消失
css 复制代码
.animationBox{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	opacity: 1;
	transform: var(--rotateZ) scale(1.2);
	animation: animation 0.5s 1 linear forwards;
}
@keyframes animation {
	0% {
		top: 0;
		opacity: 0;
		transform: var(--rotateZ) scale(1.2);
	}
	30% {
		top: 0;
		opacity: 1;
		transform: var(--rotateZ) scale(1);
	}
	70% {
		top: -100px;
		opacity: 1;
		transform: var(--rotateZ) scale(1);
	}
	99% {
		top: -100px;
		opacity: 0;
		transform: var(--rotateZ) scale(1.6);
	}
	100% {
		top: -100px;
		opacity: 0;
		transform: var(--rotateZ) scale(1.6);
		display: none;
		visibility: hidden;
	}
}

解决思路

  • 参考了一个解答,IOS 机型的 animation 会对一部分属性会进行重绘,所以会有卡顿不流畅的效果。
  • 参考链接

重新编写

css 复制代码
.animationBox{
	width: 100px;
	height: 100px;
	opacity: 1;
	transform: translateY(0) var(--rotateZ) scale(1.2);
	animation: animation 0.5s 1 linear forwards;
}
@keyframes animation {
	0% {
		opacity: 0;
		transform: translateY(0) var(--rotateZ) scale(1.2);
	}
	30% {
		opacity: 1;
		transform: translateY(0) var(--rotateZ) scale(1);
	}
	70% {
		opacity: 1;
		transform: translateY(-100%) var(--rotateZ) scale(1);
	}
	99% {
		opacity: 0;
		transform: translateY(-100%) var(--rotateZ) scale(1.6);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%) var(--rotateZ) scale(1.6);
		display: none;
		visibility: hidden;
	}
}
  • 这段代码在多个 IOS 机型上测试后,没再复现出卡顿的问题。
相关推荐
爱写代码的派大星1 小时前
bug 就像隐藏在暗处的小怪兽
bug
燕双嘤1 小时前
Bug:引入Feign后触发了2次、4次ContextRefreshedEvent
bug
向上的车轮6 小时前
软件世界中的超级bug有哪些?
bug
测试小小怪下士2 天前
Bug的严重等级和优先级别与分类
bug
测试小小怪下士2 天前
软件Bug和缺陷的区别是什么?
bug
Matrix704 天前
Spark_写ORALCE:ORA-01426 numeric overflow 问题解决
bug
明耀6 天前
WPF Gif图谱 如果隐藏的话会存在BUG
c#·bug·wpf
|Ringleader|7 天前
【Unity Bug 随记】unity version control 报 xx is not in a workspace.
unity·bug·版本管理·uvc
a1111111111ss7 天前
猫狗识别之BUG汇总
bug
晓同哇哇~7 天前
Wxml2Canvas小程序将dom转为图片,bug总结
bug·canva可画