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 that if HWA(Hardware Acceleration) 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 glitches. When I focus on the field, the whole page seems to jitter.

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

Did anyone get any experience solving this?

Answer 1

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.