android 系统 touch 屏幕导致 js 、css 动画卡顿

Question

场景

一款移动 web 小游戏，基于 canvas 实现

过程

在 andriod 系统中，当手指接触屏幕任意位置，动画会停顿一下，连续点击时卡顿效果更加明显。

在 IOS 系统中，没有出现这个问题。

测试机型

只列举两个主要机型，其它机型测试效果一致

• IPHONE 6 PLUS IOS 9.3.3

  • 微信

  • Safari

• 魅族 MX5 android 5.1

  • 微信

  • 系统浏览器

  • chrome (比系统浏览器更卡)

例子

Flappy Bird —— hilo.js 动画库 demo

其它

网上一些 h5 营销小游戏，测试后也发现同样的问题。

项目测试时还发现，如果动画执行过程同时触发 css3 transition，更加明显的卡顿

问题

这个是什么原因导致的，有什么好的方法避免

Answer 1

transition 肯定会卡的。 可以开启硬件加速 transform: translateZ(0); 用transform替代

Answer 2

这个是浏览器内核原因！现在基本上都用的是webview的！你用 钉钉 打开游戏看看就一点都不卡或者写游戏时候用上游戏引擎比如cocos2d就不会卡

Answer 3

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

Answer 4

解决了吗？我也是