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 机型上测试后,没再复现出卡顿的问题。
相关推荐
SeaTunnel3 小时前
SeaTunnel 社区月报(5-6 月):全新功能上线、Bug 大扫除、Merge 之星是谁?
大数据·开源·bug·数据集成·seatunnel
紫璨月3 小时前
nginx反向代理的bug
运维·nginx·bug
从后端到QT3 小时前
SRS流媒体服务器之本地测试rtc推流bug
bug·实时音视频
Java知识库11 天前
MySQL RC隔离级别惊现间隙锁:是bug吗?
数据库·mysql·bug
安卓机器11 天前
rom定制系列------红米note11 5G版 MTK芯片强解bl锁修复bug 官方系统 面具root批量线刷版
5g·bug
剽悍一小兔11 天前
一个小BUG引发的对Mybatis-Plus的模糊查询的思考
bug·mybatis
Gazer_S13 天前
【前端隐蔽 Bug 深度剖析:SVG 组件复用中的 ID 冲突陷阱】
前端·bug
电手14 天前
Win11用户尽快删除更新!微软6月又推Bug
microsoft·bug
穆易青14 天前
2025.06.17【BUG】|多样品VCF文件合并技巧及注意事项(以bcftools为例)
bug
穿金头戴帽15 天前
生产BUG集
java·前端·bug