css - 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?

question from:https://stackoverflow.com/questions/17059899/android-webview-hardware-acceleration-artefact-workarounds

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.