Android system touch screen causes js and css animation stutters

< H2 > scene < / H2 >

A mobile web Mini Game based on canvas

< H2 > process < / H2 >

in the andriod system, when the finger touches any position on the screen, the animation pauses, and the stutter effect is more obvious when you click continuously.

this problem does not occur in IOS systems.

< H2 > Test model < / H2 >

only two main models are listed, and the test results of other models are the same

IPHONE 6 PLUS IOS 9.3.3
- Wechat
- Safari
Meizu MX5 android 5.1
- Wechat
- system browser
- chrome (more stuck than system browser)

< H2 > example < / H2 >

Flappy Bird-- hilo.js animation library demo

< H2 > other < / H2 >

some h5 marketing Mini Game online also found the same problem after testing.

during the project test, it is also found that if the animation execution process triggers css3 transition, "s more obvious stutter at the same time

< H2 > question < / H2 >

what is the cause of this? is there any good way to avoid

Javascript css android webview

Mar.10,2021

transition will definitely get stuck. Hardware acceleration transform: translateZ (0 can be enabled; is it solved by using transform instead of

? Me too

this is the reason for the browser kernel! Now basically use webview! If you open the game with a nail, it won't get stuck at all, or if you use the game engine when writing a game, such as cocos2d, you won't get stuck

This post helps me to understand the topic more clearly and I think it will also help every readers
happy wheels

Previous: About the problem of obtaining web page data remotely by CURL in PHP.

Next: How do vue objects reverse sum and then add properties?