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 机型上测试后,没再复现出卡顿的问题。
相关推荐
石头wang21 小时前
onenote千年老bug,字体bug (calibri&微软雅黑) 的解决
microsoft·bug·onenote
林林要一直努力3 天前
AOSP Settings模块问题初窥
android·学习·bug·android studio
福大大架构师每日一题5 天前
redis 8.0.3版本更新详解:安全修复、新特性与关键bug修复全面解析
redis·安全·bug
杨小扩7 天前
特别放送:关于一个无法修复的系统级Bug
程序人生·bug
千帐灯无此声7 天前
Linux 测开:日志分析 + 定位 Bug
linux·c语言·c++·bug
紫璨月10 天前
rabbitMQ读取不到ThreadLocal消息的bug
rabbitmq·bug·java-rabbitmq
zzc92111 天前
Adobe Illustrator设置的颜色和显示的颜色不对应问题
adobe·bug·illustrator·错误·配色·透明度·底色
开-悟14 天前
嵌入式编程-使用AI查找BUG的启发
c语言·人工智能·嵌入式硬件·bug
一入JAVA毁终身14 天前
Data的时区格式BUG
bug
一入JAVA毁终身15 天前
处理Lombok的一个小BUG
java·开发语言·bug