Weird problem on android webview with canvas

I am draw some canv开发者_JAVA百科as 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?

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.

If you call invalidate() from within your View, you should get it to redraw itself. When you have an orientation change, your View is invalidated with invalidate() which forces it to re-draw its contents. You can use this invalidate() method to redraw your contents without changing the orientation.

invalidate() is a public method of your View and can be called anywhere it is in scope.