performance

The page will refresh automatically after a period of time and the following error occurs:

bug research

  1. There is no auto-refresh code in the code including referenced third-party libraries
  2. Animation is used in the code, and the refresh occurs after an animation
  3. MAC Safari not reproduced, iPhone 11 and below not reproduced; Android,Chrome not yet available;

how to do?

  1. Type alert in the code to find the error area
  2. Use the cloud system to do the simulation on a real machine

Stackoverflow.com/questions/2…

result

  1. Add CSS to element
transition: all 1.5 s ease;
     
top: calc(100vh - 2950px) ! important;
bottom: 2182.2 px.! important;
left: -2617.6 px.! important;
Copy the code

suspicion

  1. Whether the top,bottom, and left variables are not supported; Remove the bottom and test again. Same problem
  2. 1.5 s help ease the transition: all; Whether there is a problem, find the following article according to the picture

Really killing me!!!!!

solution

Change Transition: All 1.5s ease to

 transition: left 1.5 s ease, transform 1.5 s ease,
  top 1.5 s ease;
Copy the code

bug fixed!

Other people’s records —- Transition flash screen problem

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