Question

After I created a new canvas, elements with absolute or relative position inside a div (also with relative or absolute) are not rendered correctly, including ‘range’ type inputs from chrome. Only after I put the mouse over canvas that these elements go to right position. In Firefox everything works as expected. Any tips how to solve this?

Update:
As requested, here is a little demonstration:
http://meli.rezzsolucoes.com.br/demo/
for some strange reason i coundn’t get the exact behaviour from my page. but it close enough

Answer 1

thanks for helping me out! When I was doing the demo, I realized that when the canvas was not above the menu, everything worked just well. Still dunno know EXACTLY what the problem is, but it seems that if a div with relative/absolute is overlapping the canvas (even if it is not visible), webkit starts having problems rendering, god knows why. the best way to solve this would be changing the design of the page. but in my case this is not an option. So, i looked for a way to force the broswer redraw/repaint. and found this question:

How can I force WebKit to redraw/repaint to propagate style changes?

the solution, even being a dirty fix, it worked just fine. I’d still like to know why you can not overlay a canvas with a div with relative/absolute on webkit. If you guys know why and explain to me, I would be grateful.

Thanks again!