safari 重复出现问题

表现

页面打开后过段时间后自动刷新然后出现如下错误:

bug research

1. 代码中没有自动刷新代码 包括引用的第三方库
2. 代码中使用了动画,刷新发生在某个动画之后
3. mac safari 没有重现,iphone 11 及以下没有重现;android ,Chrome 未现;

how to do?

1. 在代码中打alert 查找出错范围
2. 使用云测系统用真机做模拟 stackoverflow.com/questions/2…

result

1. 经查找是某个css 加到元素上后出现上述问题,css 如下:

transition: all 1.5s ease;
     
top: calc(100vh - 2950px) !important;
bottom: 2182.2px!important;
left: -2617.6px!important;

怀疑对象

1. top,bottom,left 三个变量是否不支持;去掉bottom 再测,问题依旧
2. transition: all 1.5s ease;是否有问题,按图索骥找到如下文章

真要命!!

solution

将transition: all 1.5s ease 修改为

 transition: left 1.5s ease, transform 1.5s ease,
  top 1.5s ease;

bug fixed!

别人的记录---- transition 闪屏问题

.css { 
	-webkit-transform-style: preserve-3d; 
	-webkit-backface-visibility: hidden; 
	-webkit-perspective: 1000;
}