CODEWITHSUNDEEP
androidcsswebviewhardware-acceleration
Andrew Bullock
Andrew Bullock

Reputation: 37398

Android WebView Hardware Acceleration Artefact Workarounds

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:

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?

Upvotes: 41

Views: 10558

Answers (3)

Abhishek Hirapara
Abhishek Hirapara

Reputation: 107

Put this code in your class:

webview.getSettings().setRenderPriority(RenderPriority.HIGH); 

if (Build.VERSION.SDK_INT >= 19) {
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
}       
else {
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Upvotes: 1

Simon
Simon

Reputation: 1737

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);
}

Upvotes: 0

Alex Tape
Alex Tape

Reputation: 2291

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.

Upvotes: 1

Related Questions