Recently, I encountered a peculiar bug in Android where positioning a canvas element on the Native Android Browser (WebKit 534.4) using css
position:absolute; top:10px; left:100px;For example, if I positioned a canvas at top:100px; left:100px; it would be displayed correctly, but the GPU accelerated canvas would show up in the top left corner instead (refer to images in my previous query).
I managed to find a workaround by using CSS translate like so:
transform: translate(100px, 100px);When centering the canvas and the window width is smaller than the device width, the X position becomes negative, restricting the clickable area of the canvas to only what would be visible without any positioning.
It's quite complicated to explain, so perhaps this image will provide better clarity.
Despite implementing this code snippet, the expected alert doesn't trigger from half of the screen:
canvas.addEventListener('click', function(e) { alert('click'; });My assumption is that using CSS position top and left entails moving the canvas with CPU, causing misplacement of the GPU generated canvas. On the other hand, CSS translate uses GPU to relocate the canvas, resulting in correct positioning of the GPU generated canvas, yet the CPU registers mouse events without factoring in this offset... frustrating!
Update: Further testing on various devices confirms that this seems to be a prevalent issue among browsers using Webkit versions below 535, affecting most Android native browsers and Safari on iOS 5.