Screen flicker problem on some Android devices

[ykami]

After making transition between ScrollableViews, the screen flickers. This happens only on newer Android devices. Probably Android 2.2 or later.

[ykami]

Seems like a bug of newer webkit.

• ​http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
• ​http://stackoverflow.com/questions/4270208/css3-animation-flicker-on-android-2-2-webkit-transformtranslate-scale-a

[ykami]

(In [24484]) Fixes #12723 !strict. Added workaround for android screen flicker problem.

[ykami]

(In [24532]) Fixes #12723 !strict. Added workaround for android screen flicker problem.

[ykami]

(In [24533]) Fixes #12723 !strict. Added workaround for android screen flicker problem.

[bill]

([24533] merged the trunk changes to the 1.6 branch)

[ykami]

(In [24660]) Refs #12723 !strict. Added -webkit-transform to avoid screen flicker.

[ykami]

Flicker problem still remains especially when making a reverse slide transition. Also, the fix has a severe side-effect, which disables CSS3 rotation effects.

[zhangyp]

some way to solve the flicker problem

[zhangyp]

Kamiyama Sann, I think probably you are doing similar ways to solve the flicker problem.

[ykami]

Thanks for the information. (I saw that trick on some web site.) Webkit on newer android devices (android 2.2 or 2.3) seems to have problems around css3 animations. For example, rotateY does not work, thus the flip animation does not work. Both the flicker problem and the rotateY problem cannot be seen on an android 2.1 device. So far we found setting webkitBackfaceVisibility and webkitPerspective could solve the flicker issue and we are now testing.

[zhangyp]

Another problem is that after the previous transition, if I click button to start another transition immediately, the animation effect is lost. This happens on test_transition-animations.html when I was using Galaxy S phone. The method mentioned above could solve this problem. Please also take a look whether webkitBackfaceVisibility and webkitPerspective could also solve that. Thanks. I have submitted a patch based on revision 24677. After the modification, the slide transition in test_transition-animations.html solve the problem mentioned above.

[ykami]

(In [24844]) Refs #12723 !strict Temporary fix to workaround CSS3 rotation problem on Android devices. Not a perfect solution. Will revisit soon.

[ykami]

(In [24890]) Refs #12723 !strict Removed 50% definition from the scrollbar keyframes, because webkit on android 2.2/2.3 causes error with it.

[ykami]

(In [24891]) Refs #12723 !strict Added -webkit-animation-fill-mode: forwards;

[ykami]

(In [24905]) Refs #12723 !strict Removed webkitBackfaceVisibility and added webkitTransform:translate3d(0,0,0) instead. This fix has side-effect on html form controls. Investigation continues.

[ykami]

(In [24914]) Refs #12723 !strict Removed webkitBackfaceVisibility and added webkitTransform:translate3d(0,0,0) instead. This fix has side-effect on html form controls. Investigation continues.

[zhangyp]

Kamiyama Sann, reveal effect still does not work on scrollable view.

[ykami]

(In [24969]) Refs #12723 !strict Renamed mblDisableAndroidWorkaround to mblAndroidWorkaround

[ykami]

(In [25018]) Refs #12723 !strict To prevent being unexpectedly locked

[ykami]

Remaining issue is buttons (both <button> and <input type="button">) are not rendered correctly if the workaround for the flicker issue is applied.

[ykami]

(In [25058]) Fixes #12723 Added workaround to avoid buttons disappear due to the side-effect of the webkitTransform workaroud code

[ykami]

(In [25150]) Fixes #12723 !strict Workaround to avoid a side-effect of the screen flicker workaround.

[ykami]

(In [25180]) Fixes #12723 !strict Added workaround for auto-scroll issue when focusing input fields

[ykami]

(In [25198]) Fixes #12723 !strict Workaround to avoid screen flicker and missing button problems on Motorola XOOM

[ykami]

(In [25309]) Refs #12723 !strict Android flicker workaround should not affect the other platform. It should be applied only when android is being used.

[ykami]

(In [25316]) Refs #12723 !strict Reverted the previous change for onFlickAnimationEnd.

[Ming Zhe Huang]

Looks like some animations still not work on Android 2.2/2.3. I've split a new defect for tracking it: ​http://trac.dojotoolkit.org/ticket/13154.