奇怪的Android 4.1 / 4.2 WebView模糊和z索引错误，打开硬件加速

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 银河 S4,4.2 硬件注 1W

Answer 1

尝试使用 translateZ 来控制模拟 z 索引：

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