Kyle Kyle - 4 months ago 93
Android Question

Android WebView renders blank/white, view doesn't update on css changes or HTML changes, animations are choppy

When ever I make a css class change, the changes don't always appear. This appears to happen when I have a touch event that adds something like a down class name to a button. The button doesn't update, and neither does anything else on the page. It's very inconstant in when it works. I've also noticed that sometimes my elements appear white with no content or anything. This is very frustrating!

Answer

Warning

Below you will find my solution to the problem, but it isn't highly recommended because it will drain the device's battery and cause an infinite loop. There are better solutions below based on this method and I recommend you check those out, too!

I would also like to add that a better solution has come to light if you plan to support Android 4.4+; it's a drop-in WebView replacement called CrossWalk. It uses the latest Chromium and it's fantastic. You can read up about it here: crosswalk-project.org


I'm answering my own question to hopefully help people out with the same issues as me.

Okay. I've been dealing with Android's WebView and PhoneGap for a few weeks now. I've come to hate Android's implementation of WebKit. It's awful. Nothing in terms of animation or rendering is ever as you would expect.

I've tried several methods to making things better, even the all notorious -webkit-transform: translate3d(0,0,0); Even that didn't work all too well.

Let me share with you what did work.

First, use the most recent API. I'm using API 15. In your android manifest, make sure to enable hardware acceleration. If your version of API does not support this, then move on to the next bit.

If your version does support it, you can enable it by modifying your manifest:

<application
    ...
    android:hardwareAccelerated="true"
    ...
    >

Also, make sure that your manifest has the minimum supported API to the one that you are using. Since I'm using API 15, this is what my manifest has:

<uses-sdk
    android:minSdkVersion="15"
    android:targetSdkVersion="15" />

Now, in your primary CSS file for what will be presented in a WebView, add something like this:

body div {
    -webkit-transform: translate3d(0,0,0);
}

Add onto the body div bit with any other element types you have; you can probably exclude images, ul, li, etc. The reason for applying this CSS style to everything is just by trial and error, and I found that brute-applying it to everything appears to work the best. With a larger DOM tree, you may need to be more-specific. I'm not sure what the specification would be, however.

When you instantiate your webview, there are some settings you'll want to set:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html");
    this.appView.getSettings().setRenderPriority(RenderPriority.HIGH);
    this.appView.getSettings().setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND);
}

Second to last, but crucial bit: I was reading through the source code for WebView and found this little tiny comment about force redrawing. There is a static final boolean, than when set to true, will force the view to always redraw. I'm not huge on Java syntax, but I don't think you can directly change a static final attribute of a class. What I did was, I extended the class like so:

import org.apache.cordova.CordovaWebView;

import android.content.Context;
import android.graphics.Canvas;

public class MyWebView extends CordovaWebView {
    public static final String TAG = "MyWebView";

    public MyWebView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Warning! This will cause the WebView to continuously be redrawn
        // and will drain the devices battery while the view is displayed!
        invalidate();
    }

}

Keep in mind, I'm using PhoneGap, so I had to extend from the CordovaWebView. If you see in the onDraw method, there is a call to invalidate. I'm not sure what sorcery this method does, but it's pretty magical.

There is one final step, if you are using PhoneGap. You have to tell PhoneGap to use your new WebView class instead of their own WebView class. In your MainActivity class, add this:

public void init(){
    CordovaWebView webView = new MyWebView(MainActivity.this);
    super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}

That's it! Try and run your app and see if everything is much smoother. Before doing all of these changes, the pages would appear white, no CSS changes would be applied until after tapping on the screen again, animations were super choppy or not even noticeable. I should mention that the animations are still choppy, but far much less choppy than before.

If anyone has anything to add to this, just comment under. I'm always open for optimizations; and I'm fully aware there may be better ways to do what I have just recommended.

If my above solution did not work for you, could you describe your specific situation and what results you are seeing with Androids WebView?

Lastly, I have enabled this answer as a "community wiki", so anyone and everyone, feel free to make adjustments.

Thanks!

-- edit --

With the most latest PhoneGap, you'll need to have your init() method look more like this:

public void init(){
    CordovaWebView webView = new MyWebView(MainActivity.this);
    super.init(webView, new IceCreamCordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}
Comments