Webkit浏览器<535（Android native / ios5 Safari）HTML5 Canvas单击错误

几周前，我在Android上遇到了一个错误，如果您使用CSS在本地Android浏览器（WebKit 534.4）上放置画布元素，将CSSposition:absolute; top:10px; left:100px;放置重复的Canvas（显然android使用一个进行GPU加速），则会忽略浏览器的渲染。定位。

因此，如果我在某个位置有一个画布，那么我的画布top:100px; left:100px;将处于完美的位置，但是GPU加速画布将忽略它，它将位于左上角（请参阅上一个问题的图像

Android本机浏览器复制HTML5画布（Chrome中很好用）

我找到了一个解决方案，该解决方案是使用CSS转换，这样就transform: translate(100px, 100px);可以解决此问题，因为GPU加速画布在同一位置渲染（因此它不会出现重复）...。

但是作为一种效果，我现在有一个点击错误。

当将画布居中时，当窗口宽度小于设备宽度时，X位置将为负值，发生这种情况时，画布上唯一可单击的区域将是不定位的情况下显示的区域。

这很难解释，但希望此图像可以使它更清晰

我认为这是浏览器本身的问题，即使当我有此代码时，警报也不会从屏幕的一半触发

canvas.addEventListener('click', function(e) { alert('click'; });

I'm guessing that CSS position top and left use the CPU to move the canvas so the GPU generated one is in the wrong place, but CSS translate uses the GPU to move the canvas so the GPU generated one is correctly positioned but the CPU is reading mouse events without this offset........AHHHHH!

EDIT: after testing on more devices I can confirm that this appears to be an issue with browsers using a version of webkit under 535 as this issue appears on most Android Native browsers and Safari on iOS5