Animations on Android flickering

[interfasys]

Does this fix it?

.x-panel {
    -webkit-backface-visibility: hidden;
}

From http://www.senchatouchbits.com/6/fix...-phonegap.html

[perry_jia]

Yes, It may be all right.
However,
1 when you open the map example(sencha-touch/examples/map/), you will find the map can not be dragged anymore in web chrome browser.
2 And open the kitchen sink example(the form example): sencha-touch/examples/kitchensink/,Test in Android 2.2, you will find the very strange thing. Open the following link, and see the picture: http://www.sencha.com/forum/showthre...-Passwordfield

All of these problems are caused by the above css code : -webkit-backface-visibility: hidden;.

any solutions? waiting...

[interfasys]

I haven't tested on Android, but the issues you're having are similar to what I've seen on the PlayBook. Enabling that fix totally messes up the icons, a bit like what Google Maps does when it's loading new bitmap squares.

[grayb]

Same here, saw this bug with the kitchen sink, Android 2.2 LG Optimus

[JELaVallee]

We can report seeing the same behavior in Sencha v1.1.0 running in a PhoneGap v0.9.5 Android shell on a Nexus One running Android v2.3.3

The blinking/flickering occurs before slide and fade animations and also randomly occurs when using an embedded Ext.Map/GMapAPIv3 map in a panel.

Also, we've tried the -webkit-backface-visibility: hidden; trick on .x-panel but also see erroneous behaviors as a result (for us we're using all custom button icons in the background of the button vs. the -webkit-mask technique, so the only time we see oddities is in Ext.Map). Going to play with applying the -webkit-backface-visibility: hidden property a bit less aggressively and see what happens.

-Etienne

[emblemparade]

I'm really hurting on this bug. :/

Anybody find a way to do more discriminating CSS so that the animation fix doesn't break icon rendering?

[perry_jia]

You can read Sencha-Touch release note: http://dev.sencha.com/deploy/touch/release-notes.html

1.1
Known Issues

• Animations on Android devices may still cause flickering
• Focusing on form fields at the bottom of the screen might not work properly on Samsung Galaxy S

So, do not use animation in Android.

[emblemparade]

Right, but there's also this closed thread that claims that the bug has been solved:

http://www.sencha.com/forum/showthre...coming-Release

An explanation of the solution would really be appreciated by many of us who have (prematurely?) developed applications around Sencha Touch right now.

[niteblade]

Most likely due to the lack of hardware acceleration for the browser in Android. IMHO this is one of the biggest problems with the phone class Android operating systems at the moment - the iPhone is glass smooth with javascript animations but Android often looks sluggish and flickers even on the fastest of processors.

The Gingerbread browser uses software rendering - Supposedly the next Android codenamed "Ice Cream" will have full hardware acceleration of the desktop and browser. Will be nice for Android to finally catch up to iPhone and Windows Phone 7, especially when you consider that many if not most of the chips running Android are capable of this.

Bob

[emblemparade]

Nice guess, Bob, but this is very clearly a CSS transparency issue. Using the CSS fix does make the flicker go away -- the problem is that it introduces icon rendering issues.

I also test my applications on some of the worst Android phones out there, and they otherwise work fine with Sencha Touch. Android's browser is not as nice as mobile Safari, but it's really good enough for the kind of animations we're dealing with here, hardware acceleration or not.