Javascript Webkit浏览器<；535（Android本机/ios5 safari）HTML5画布点击错误

几周前，我在Android上遇到了一个bug，如果你在原生Android浏览器（WebKit534.4）上使用css定位

position:absolute定位画布元素；顶部：10px；左：100px复制画布（显然android使用一个用于GPU加速）被渲染到浏览器，忽略定位

因此，如果我在位置
top:100px处有一块画布；左：100px我会将画布完美地放置到位，但GPU加速画布将忽略它，并将位于左上角（请参见我前面问题中的图片）


我找到了一个解决方案，就是使用CSS translate，就像这样
transform:translate（100px，100px）；
现在解决了这个问题，因为GPU加速画布呈现在同一个地方（所以它看起来不重复）

但作为一个连锁反应，我现在有一个点击错误

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

这很难解释，但希望这张图片能让它更清晰


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

canvas.addEventListener（'单击'，函数（e）{alert（'单击'；}）；


我猜CSS position top和left使用CPU移动画布，因此GPU生成的画布位于错误的位置，但是CSS translate使用GPU移动画布，因此GPU生成的画布位于正确的位置，但是CPU正在读取没有此偏移的鼠标事件……。啊啊啊啊


编辑：在更多设备上测试后，我可以确认这似乎是使用535下webkit版本的浏览器出现的问题，因为大多数Android原生浏览器和iOS5上的Safari都出现了这个问题。好的，我已经解决了这个问题，但我认为这是非常具体的

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)';
}

if（webKitVer<535）{
document.body.style.paddingTop=pos.top+“px”；
如果（canSeeWholeOfCanvas）{
canwrap.style.transform='translateX（'+pos.left+'px'）；
canwrap.style.left='auto'；
}否则{
canwrap.style.left=pos.left+“px”；
canwrap.style.transform='none'；
}
} 
其他的
{
//标准所有浏览器
canwrap.style.transform='translate（'+pos.left+'px'，+pos.top+'px'）；
}

感觉很粗糙，很难解释具体的情况。但它是有效的


在旧的webkit浏览器（通常是Android原生浏览器和IOS5 safari）中，有两个bug

如果画布位于css顶部和左侧，则会忽略它们的属性来渲染重复的GPU渲染画布（为GPU硬件加速生成），因此它们不会正确对齐

如果使用css转换定位画布，则GPU复制画布将正确对齐，但当画布定位在负X位置时，则只有在没有css的情况下可以看到的画布部分才是可单击的

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