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 机型上测试后,没再复现出卡顿的问题。
相关推荐
boonya7 小时前
国内外常用的免费BUG管理工具选型
bug
10岁的博客8 小时前
Bug排查日记:高效记录与解决之道
bug
彭刷子16 小时前
【Bug】Nexus无法正常启动的五种解决方法
bug·nexus
黑客飓风20 小时前
从基础功能到自主决策, Agent 开发进阶路怎么走?
面试·log4j·bug
mahuifa1 天前
C++(Qt)软件调试---bug排查记录(36)
c++·bug·软件调试
Kyln.Wu1 天前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
2501_930104041 天前
Bug 排查日记:打造高效问题定位与解决的技术秘籍
bug
weixin_377634841 天前
【YOLO】数据增强bug
yolo·bug
伍哥的传说1 天前
还在为第三方包 bug 头疼?patch-package 让你轻松打补丁!
bug·开发效率·前端工具·第三方包bug·前端开发痛点·npm包修复·依赖包定制
黑客飓风1 天前
Bug排查日记:从崩溃到修复的实战记录
log4j·bug