Weird problem on android webview with canvas

Question

I am draw some canvas charts on the android webview, and use javascript to change chart just by hiding and showing, and also change the title by reset its innerHTML.

The title is just a normal html tag "<div id='title'></div>",

The problem is that the page does not render well when I switch charts, for example. when I choosed to display the next chart and change the title's innerHTML, the title seems 'remembered' its previous innerHTML and it looks like one text overlapped another.

If I manually change my phone's orientation, it seems make the webview redraw its content (not refresh), then everything will be fine.

Any idea on this? or can I simulate the orientation change event to make my webview redraw its page to work around it?

Answer 1

This issue seems to come up when you are using a transparent background with your webview. Try adding this into your CSS:

body {
    background-color:black;
}

Or whatever you wish your background color to be.