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?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36af8-2c016.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36af8-2c016.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?