Webview Rendering Issue in Android Kitkat

WebView Rendering Issue in Android KitKat

In my case, in Android 4.4, I was getting a black background no matter I set what and this error message in my LogCat: nativeOnDraw failed; clearing to background color.

From Googling, it seems to be because hardware accelerated canvas rendering is not supported in Chromium WebView. I added this line to the WebView to turn off hardware accelerated canvas and now it works.

mWebview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

KitKat Animation and WebView rendering issue

My guess was somewhat correct. I found a hack to fix this issue.

1. Extend WebView and override all constructors
2. Set layer type to software for the custom WebView

API level >= 11

setLayerType(LAYER_TYPE_SOFTWARE, null);

API level < 11

try {
    Method setLayerType = getClass().getMethod("setLayerType",
            new Class[] { int.class, Paint.class });
    if (setLayerType != null)
        setLayerType.invoke(this, new Object[] { 1, null });
} catch (NoSuchMethodException e) {
} catch (IllegalArgumentException e) {
} catch (IllegalAccessException e) {
} catch (InvocationTargetException e) {
}

NOTE: This implementation dramatically affects performance of WebView.

Webview not rendering css properly - Kitkat version 4.4.2

The problem is that you may be using design elements that WebView can't handle.

The Default Android browser - AKA "WebView" -

is based on the same code as Chrome for Android version

However,

WebView does not have full feature parity with Chrome for Android

in other words, it's a toned down version of Chrome for Android.

Source: Google

Check on Can I Use to To see whether "WebView" suppports your element or not.

Page renders incorrectly on pre kitkat device [WebView]

I just went through your code and realized that I too faced a similar issue in the past. Then the culprit was -flex-box.

ionic.css uses flex. Android 4.3 version had partial support for flexbox. It is completely supported from Android 4.4 onward. See this.

Have a look at this discussion as well.

Solution here could be to overwrite CSS properties. Eg.: replacing display: flex / inline-flex with display: block or display: inline

More generic solution could be to use crosswalk webview in the project. This makes your Cordova / Ionic application use the Crosswalk WebView instead of the System WebView.
This webview plugin would help in eliminating device specific or webview specific issues as app would use the same webview across all the devices.

You can add iionic plugin as follows:

ionic plugin add cordova-plugin-crosswalk-webview 

Hope this would help.

---

Related Topics