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 机型上测试后,没再复现出卡顿的问题。
相关推荐
生命几十年3万天11 小时前
通宵修bug
bug
LilKevinRay12 小时前
【SpringMVC】记录一次Bug——mvc:resources设置静态资源不过滤导致WEB-INF下的资源无法访问
java·笔记·mvc·bug
会发光的猪。13 小时前
前端vue3若依框架pnpm run dev启动报错
前端·javascript·vue.js·前端框架·bug
小汤猿人类2 天前
苍穹外卖Bug集合
bug
且行且知3 天前
CubeIDE BUG-project‘hello‘has no explict encoding set hello
bug
一条破秋裤3 天前
针对解决前后端BUG的个人笔记
笔记·bug
马浩同学3 天前
【ESP32】ESP-IDF开发 | I2C从机接收i2c_slave_receive函数的BUG导致程序崩溃解决(idf-v5.3.1版本)
c语言·单片机·嵌入式硬件·mcu·bug
偏振万花筒4 天前
【BUG分析】clickhouse表final成功,但存在数据未合并
clickhouse·bug
神米米4 天前
Unity3D包管理bug某些版本Fbx Exporter插件无法搜索到的问题
bug
行者记4 天前
Qt小bug —— QTableWidget排序后更新数据显示不全
开发语言·qt·bug