Webkit瀏覽器<535（Android本機/ ios5 safari）HTML5畫布點擊錯誤

我在Android中遇到了一個bug，如果您使用css定位在原生Android瀏覽器（WebKit 534.4）上定位canvas元素position:absolute; top:10px; left:100px;重複的畫布（顯然android使用一個GPU加速）呈現給瀏覽器忽略定位。Webkit瀏覽器<535（Android本機/ ios5 safari）HTML5畫布點擊錯誤

所以，如果我有top:100px; left:100px;位置我有我的理想位置帆布畫布，但GPU accleration畫布會忽略它，並會在左上角坐（見圖片來自我剛纔的問題

Android Native Browser duplicating HTML5 canvas (fine in chrome)

我找到了解決辦法，這是使用CSS轉換，而不是像這樣transform: translate(100px, 100px);現在這個固定的GPU accleration畫布在同一個地方呈現的問題（所以它不出現重複的）....

但是現在我開始敲門有一個點擊錯誤。

當IM以畫布爲中心時，當窗口寬度小於設備寬度時，X位置將爲負值，當發生此情況時，畫布唯一可點擊的區域是沒有定位的情況下將顯示的內容。

這是很難解釋，但希望這個形象將使其更清晰

Click Bug

我認爲這是與瀏覽器本身，因爲即使一個問題，當我有這個代碼的一半警報犯規火屏幕

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

我猜CSS位置上方和左側第使用e CPU移動畫布以便GPU生成一個錯誤位置，但CSS翻譯使用GPU移動畫布，以便GPU生成一個正確定位但CPU正在讀取沒有此偏移的鼠標事件..... ... AHHHHH！

編輯：在更多的設備測試後，我可以證實，這似乎是一個問題，使用的瀏覽器WebKit版本的535在大多數Android原生瀏覽器和Safari瀏覽器上出現的iOS5

來源

2013-10-22 rorypicko

這個問題下好的，我已經解決了這個問題，但我認爲這很具體。

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的部分是可以點擊

因此需要根據畫布的可見性改變兩者

來源

2013-10-23 11:32:07 rorypicko

Webkit瀏覽器<535（Android本機/ ios5 safari）HTML5畫布點擊錯誤

回答

相關問題