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:

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?

have you tried in your webview? : setLayerType(View.LAYER_TYPE_SOFTWARE, null); — Abhishek Hirapara, Dec 24 '19 at 11:46

score 1 · Answer 1 · answered Oct 19 '13 at 15:41

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.

answered Oct 19 '13 at 15:41

Alex Tape

2,291
4
26
36

Described actions are causing the opposite effect. Those artifacts are the result of the GPU acceleration. So leveraging the GPU is what we want to avoid. I had the same problem and unfortunately the only solution I've found so far is disabling the hardware acceleration for the whole WebView. – pepkin88 Jan 08 '15 at 17:05

score 1 · Answer 2 · answered Dec 24 '19 at 12:29

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

score 0 · Answer 3 · answered Jul 05 '19 at 12:56

0

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

answered Jul 05 '19 at 12:56

Simon

1,657
11
16

Android WebView Hardware Acceleration Artefact Workarounds

3 Answers3

Linked