Android WebView Hardware Acceleration Artefact Workarounds

Question

So there's a known bug with WebView hardware acceleration in Android, see here for example: https://code.google.com/p/android/issues/detail?id=17352

Disabling hardware acceleration is not an option for me.

I've read these great references:

• Android webview slow
• https://plus.google.com/+PaulIrish/posts/ccP98BTMd5Z
• http://riamobilesolutions.com/android-webview-scrolling-performance/

My question is, given HWA is turned on, does anyone know any CSS/HTML workarounds to prevent the rendering artefacts that can occur?

I'm only seeing them when I give focus to a form field, it seems to cause vsync-esque and subpixel gitches. When I focus the field, the whole page seems to jitter.

It seems position: absolute has something to do with this, too.

Anyone got any experience solving this?

Answer 1

I've had similar issues with rendering when HWA was enabled. The rendering issues disappeared when I applied the following line to body (in css).

body {
  -webkit-transform: translateZ(0);
}

Answer 2

add:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

if you working with 3d transform.. it is a cheap trick BUT it will improve the performance espacially on iPad..

furthermore you can try to

-webkit-transform: rotateZ(0deg);

AFAIK rotations can boost the performance because gpu´s are much better in rotating something..

another way is to lay down an 'without function' transformation on each element on the screen..

please let me know if i could help you.