Phone Android HTML5 Hardware Acceleration - Canvas

Question

I am having a strange issue. When I have hardware acceleration enabled, if I am drawing to a canvas element, whatever is drawn on the canvas, will be re-drawn to the top of

Answer 1

I had the same problem. Seems to be caused by jquery mobile css in my case.

Going into a little more detail to what guya added, go to the jquery.mobile.structure.css file and change this line:

.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }

to

.ui-content { border-width: 0; overflow: visible; padding: 15px; }

Removing the overflow-x: hidden attribute fixes the problem.

Source: Github / thomasjbradley / signature-pad / Issues

Edit: Strangely enough, I noticed the problem didn't occur when the canvas width was 256px width or less.