PDA

View Full Version : Workaround for Android tablet <img> carousel rendering bug



dholth
14 Jul 2011, 10:25 AM
I've noticed that a carousel full of 100% width <img> tabs looks awful while animating on a 3.1 Honeycomb eee pad transformer, and when it stops the image may not be completely rendered.

Workaround placed at the end of Carousel.onTransitionEnd. Now the image is completely shown after the scroll animation. Is there a better way to force redraw? Would a background image render more reliably than <img> tags?



if(Ext.is.Tablet && Ext.is.Android) {
var posttrans = function(el) {
// force redraw on buggy Android webkit
return function() {
el.style.webkitTransform = 'translate(1px, 0)';
Ext.defer(function() { el.style.webkitTransform = 'translate(0, 0)'; }, 1);
}
}

var pt = posttrans(e.target);
Ext.defer(pt, 1);

hitman01
2 Sep 2011, 11:22 AM
I'm also using an image carousel (http://www.mygazines.com/demo) and the animation on the images is extremely choppy on Android (3.0 - 3.2) Tablets. Is there a workaround? I tried reducing image quality and it still is very choppy. The images in the carousel are buffered, so its not loading, its actual rendering.

What can I do to reduce the choppy rendering of images on Android tablets?

dholth
2 Sep 2011, 11:34 AM
I am not aware of a workaround for the choppiness. My workaround merely ensures that the image is completely drawn when the choppy scrolling animation is done, instead of showing the background instead of part of the image. The animation also seems a little better (still choppy, but no background shows through) in the PhoneGap packaged version.

hitman01
2 Sep 2011, 11:47 AM
My app actually works good in Phonegap (no choppiness). Its just really choppy for some reason on Android browser, and the code is the same as my Phonegap app.

steve1964
2 Sep 2011, 2:30 PM
Hi, read this:
http://forum.xda-developers.com/showthread.php?t=1213087
T (http://forum.xda-developers.com/showthread.php?t=1213087)he hardware acceleration is enbled by defualt in the browser, in Phonegap you have to set it to true in the androidmanifest.xml. If hardware acceleration is set to true you will have poor performance in the app too. It's a bug, a huge bug....

hitman01
6 Sep 2011, 7:32 AM
Thanks steve1964,

That answered my question.

Basically on Androids 3.0 and up, hardware acceleration in enabled in the browser but is disabled (by default) in the apps. Hardware acceleration has some serious problems and therefore apps (without hardware acceleration such as phonegap) perform better than in the browser.

Are there any solutions to this problem or we just need to wait until Android is fixed?