開啟硬件加速后，Android 4.1 / 4.2 WebView模糊和Z-index錯誤

Question

我當時使用Android WebView將HTML5游戲遷移到Android。 Android 5、4.4.x和4.3可以完美運行，但是4.1 / 4.2產生了一個非常奇怪的問題。

該游戲是視頻，畫布和其他DOM元素的組合。

在4.1 / 4.2中，有兩種狀態：

1. 一切都很好，沒問題
2. 所有畫布元素都忽略z-index，並且始終位於頁面頂部。 視頻是相同的，但低於所有畫布元素。 其他所有DOM元素都變得非常模糊

我發現只有在“硬件加速”打開並且以下情況下才會觸發第二種狀態：

1. 在頁面頂部顯示一個模式框
2. 或視頻已成功播放（這是HLS視頻流）
3. 或在屏幕上顯示太多元素（我正在使用transform：縮放以使應用適合屏幕大小，如果我將3/4個元素翻譯出屏幕，則該錯誤將得到修復）

我知道可以通過關閉硬件加速來解決此錯誤，但是我不允許這樣做。 有人可以幫忙嗎？

我是否可以選擇通過CSS / JavaScript關閉硬件加速？

或者，是否有任何解決此錯誤的方法？

經測試的設備：4.2 Galaxy S4、4.2 HW NOTE 1W

Answer 1

嘗試使用translateZ來控制模擬z索引：

canvas{
    -webkit-transform: translateZ(-1px);
}
otherDiv{
    -webkit-transform: translateZ(0px);
}