android webview previous content in background

Question

Not sure if this is a problem due to using transparent backgrounds, but I am using a webview to show a webpage to the user, however if the user loads another url from a link or javascript is used to dynamically insert new content into the page the rendering seems to glitch.

By glitch I mean that the page remains in the background whilst the new content / page is loaded in the foreground. They end up overlapping and making everything very unreadable.

I have hardwareacceleration turned off on my webview to enable transparent background, could that be causing the problem?

It's similar to this question Android Webview Content Overlapping While Using Transparent Background.

Many thanks.

Answer 1

This was due to the fact I had transparent background on, I removed this and it was okay. Not the best solution but one that is preferred over having glitchy graphics. I mimiced the transparent background by matching the CSS background properties to that of where my WebView was positioned.

Answer 2

Had the same problem on Google TV boxes and managed to fix this by forcing WebKit to redraw the DOM from jQuery as in:

$('<style></style>').appendTo($(document.body)).remove();

or (if you don't like jQuery):

document.body.style.display='none';
document.body.offsetHeight;
document.body.style.display='block';

You can inject either of the code fragments dynamically from Android as in webView.loadUrl("javascript:(function(){ /* put the force-redraw-code here */ })()") or do it directly from JavaScript after you altered the DOM.

More related fixes at How can I force WebKit to redraw/repaint to propagate style changes?