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 the page.

If I turn off Hardware Acceleration, this issue does not occur.

I have only personally tested it on Android 4.1.1, but I've noticed this issue before on one of our users awhile ago that I couldn't replicate (They were on Android 3+ atleast)

I can't exactly grab a screenshot (not too sure how to do that on Android), but I will try break down the process.

with hardware accel enabled

1. user fills out usual details.
2. user scrolls to bottom of page, draws out a Signature on canvas element.
3. If user forgot something at top of page and scrolls to top of page
4. A visual bug occurs, the signature they drew appears at the top of the page

However with no hardware accel, step 4 does not occur. Is there something I'm supposed to do to the HTML5 Canvas?

I'm not sure what information I need to pass over here - it seems to occur on Samsung, HTC and Google Nexus Phones/Tablets so its a consistant bug.

I tried searching around, but I always end up getting Game Development threads or the likes.

I really would like to have Hardware Accel enabled, this is the only issue that occurs from it - the peformance gains are soooo incredible

Answer 1

The duplicated HTML5 canvas issue in Android has emeerged with version 4.1.1 and it's not fixed in the latest 4.2 yet.

The solution is that none of the parents HTML elements to the canvas will have overflow:hidden or overflow:scroll