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

Question

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

因此，如果我在top:100px; left:100px;位置有一个画布top:100px; left:100px; top:100px; left:100px; 我将画布放置在正确的位置，但是GPU加速画布将忽略它，它将位于左上角（请参阅上一个问题中的图像）

Android本机浏览器复制HTML5画布（在chrome中精细）

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

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

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

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

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

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

---

我猜测CSS上下位置使用CPU移动画布，因此GPU生成的画布位于错误的位置，但是CSS平移使用GPU移动画布，因此GPU生成的画布正确定位，但CPU读取没有此偏移量的鼠标事件........ AHHHHH！

---

编辑：在更多设备上进行测试后，我可以确认这是使用535以下版本的Webkit的浏览器出现的问题，因为此问题出现在大多数Android Native浏览器和iOS5的Safari上

Answer 1

好的，我已经解决了这个问题，但是我认为这是特定情况的。

if(webKitVer < 535) {
     document.body.style.paddingTop = pos.top + "px";
    if(canSeeWholeOfCanvas) {
        canwrap.style.transform = 'translateX('+pos.left+'px)';
        canwrap.style.left = 'auto';
    } else {
        canwrap.style.left = pos.left + "px";
        canwrap.style.transform  = 'none';
    }
} 
else 
{
    //standard all browsers
    canwrap.style.transform = 'translate('+pos.left+'px, '+pos.top+'px)';
}

感觉很笨拙，因情况而异且难以解释。 但是有效

---

在旧的Webkit浏览器（通常是Android本机浏览器和IOS5野生动物园）中，存在两个错误

如果画布的位置在CSS的顶部和左侧，则将渲染一个重复的GPU渲染的画布（为GPU硬件加速而生成），并忽略它们的属性，因此它们的对齐方式不正确。

如果画布使用css变换定位，则GPU重复画布正确对齐；但是，当画布位于负X位置时，只有单击css才能看到的画布部分是唯一可单击的

因此需要根据画布的可见性在两者之间进行更改