So we’ve been working hard at porting a Flash game over to HTML5, and things were going smoothly… that is until I updated Android to 4.3 on my Galaxy S3. After the update, my chrome would flicker all the dom elements ( including the canvas ), like it didn’t know what layer anything should be on and instead everything was fighting to be on top. It didn’t matter if it was canvas or dom, it would flicker.
This game used CreateJS, JQuery, a handful of custom libraries and a lot of custom code.
I found the cause of the problem today, and the solution.
This only occurs when CreateJS’s Timer is set to use setTimeout mode ( default ), instead of either one of the Request Animation Frame modes. Once the Timer class was setup to use RAF instead of Timeout, the flickering problem just went away! I’m certainly not complaining. more info: http://www.createjs.com/Docs/EaselJS/classes/Ticker.html#property_RAF
Also, a similar problem came from GreenSock. With GreenSock RAF is used by default, but this causes an issues on iOS with DelayedCalls. The issue is that delayed calls take MUCH longer than expected to fire, for me it took 10x longer. The fix here is to turn RAF off for GreenSock when using iOS. more info: http://forums.greensock.com/topic/6639-tweens-not-working-on-ios6/
Recap:
Turn RAF on for CreateJS’s Timer and off for GreenSock’s TweenLite / TweenMax.