Strange issue in Android web browser with canvas

Question

I draw several canvas diagrams on an Android web browser and use javascript to change the diagram only by hiding and showing it, as well as changing the name of the reset to its innerHTML.

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

The problem is that the page does not display well when I switch charts, for example. when I chose to display the next chart and change the title of innerHTML, the title seems to be “remembered” by its previous innerHTML, and it looks like one text overlaps another.

If I manually change the orientation of the phone, it seems like the webview is redrawing its contents (not updating), then everything will be fine.

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

Answer 1

This problem occurs when you use a transparent background with your webview. Try adding this to your CSS:

 body { background-color:black; } 

Or, whatever you wish, the background color.

Answer 2

If you call invalidate() from your View , you must redraw it. When you change the orientation, your View invalid with invalidate() , which causes it to re-draw its contents. You can use this invalidate() method to redraw content without changing orientation.

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