How to force Android Webview to repaint on DOM changes?

Question

I'm currently working on a web portal that needs to be run within an Android Webview as part of a native application. This whole portal is heavily AJAX-based. So whenever a form is submitted, this is done asynchronously. Depending on the response, I need to present a message box saying "Success" or "Error". I'm doing this with jQuery at the moment. The problem is, that the Android Webview won't repaint and thus the message box won't be visible. What helps, is to tap anywhere on the screen. This seems to force the repainting. No what I need to do is:

1) Do the DOM changes in another way so the Android Webview handles it properly.

OR

2) Force a repainting by triggering some (pseudo) events or by using some dirty hack :)

Anyone ever experienced this problem? Any hints are heavily appreciated.

Answer 1

Watch this video and read this answer. The trick is to use

    -webkit-transform: translate3d(0,0,0);

css style on the div which needs to be updated. This creates a new layer and animations/updates become smoother.

Answer 2

I've never had an issue with it displaying DOM updates from non-Async calls, so perhaps a solution would be to have your asynchronous methods call back to an injected object (WebView.addJavascriptInterface()) - then have that run a call on the UI thread to the Webview to update the UI?