Android本机浏览器复制HTML5画布（在chrome中很好）答案

【问题标题】：Android Native Browser duplicating HTML5 canvas (fine in chrome)Android本机浏览器复制HTML5画布（在chrome中很好）
【发布时间】：2013-08-18 18:45:57
【问题描述】：

这是一个奇怪的问题，我只在本地浏览器中的三星 Galaxy Tab 2 和 Galaxy S2 上的本地浏览器上遇到。

这也在其他 android 手机和平板电脑（例如 Nexus 7 和 Galaxy S4）上进行了测试，但它们的原生浏览器是 chrome，所以看起来不错。在任何 IOS 浏览器、Windows 桌面浏览器或 Mac 桌面浏览器上也不存在此问题。

这几乎就像网页在自身之上加载了两次！

由于有一个重复的画布元素，它会像主画布一样更新。

这里看起来好像只有在横向模式下旋转时才会发生，但我相信在纵向模式下，画布在顶部完全对齐。

更奇怪的是，你看到的菜单按钮是一个切换按钮，点击打开菜单，点击关闭菜单。在此设备上，当您点击它时，它会立即打开和关闭。静音按钮切换也是如此。

我完全不知所措。

我已经做了一些 javascript 调试，在这里和那里抛出了一些警报，并且创建对画布等的引用的初始化函数只被调用一次。

我已经阅读并听说过硬件加速会导致问题，但我可能找到的解决方案仅与构建本机应用程序相关！不是 HTML5 Canvas 网页。

对此的任何见解都可能很棒！提前致谢。

--编辑

我还进行了这个测试alert(document.getElementsByTagName('canvas').length); 以查看 DOM 中是否有 2 个画布，但它返回 1！

【问题讨论】：

检查一下三星的用户代理，然后删除第二个。我很困惑这是否可能，因为长度是画布标签的 1。
请尝试提供问题的SSCCE，然后我们可以查看源代码并在其他设备上尝试。
@Pool 对，既然每个人都没有三星设备，你有什么窍门吗？我上次通过 Webmatrix 在 Win7 中尝试了 IOS 模拟器，但它未能向我显示类似于此问题中发现的问题的错误。
这不仅仅是重现问题，将问题减少到一个小测试用例也可能有助于隔离 RoryPicko92 的问题，或者显示一些可能导致一些故障的不常见或不正确的用法。跨度>
@Pool 我创建了一个 SSCCE 版本，它没有错误！所以我开始一次添加一些功能，我将其缩小到画布缩放（使用 css）或使用 css left 将其定位在屏幕中心的事实，这里是 SSCCE 版本kokodev.co.uk/canvasbug

标签： javascript android html5-canvas

【解决方案1】：

我遇到了同样的问题。在对画布进行更改后，我可以通过运行以下代码来解决此问题：

// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {

    // Tweak the canvas opacity, causing it to redraw
    $('canvas').css('opacity', '0.99');

    // Set the canvas opacity back to normal after 5ms
    setTimeout(function() {
        $('canvas').css('opacity', '1');
    }, 5);

}

通过调整不透明度，这会强制画布重绘并移除重复的形状。这是一个愚蠢的修复，但它有效。希望这对某人有所帮助。

【讨论】：

这并不能解决我的问题，画布仍然重复。此外，已经有一个 setTimeout 以每秒 30 次的速度运行更新函数来重绘整个画布。
尝试将此代码放在 setTimeout 更新函数的底部。
谢谢！这确实有效！唯一的问题是它现在在这些旧设备上运行得更慢。那好吧！遗憾的是没有更好的解决方法，因为我现在只构建一个非常简单的基于菜单的游戏，并且它显着降低了它的速度（无论如何，这台设备的性能并不是很好）！
经过更多测试后，我得出了这些结果... opacity hack 强制“假”画布更新，所以它仍然存在，但它们相同地覆盖，所以它不会被注意到。但是假画布没有考虑到具有 css 属性边距、平移或上/左的画布的定位。所以假画布正在更新，但它与真实画布的偏移量。还没有完全修好！ :(
将画布包装在一个大小相同的 div 中，并对其应用 css 位置属性，似乎可以阻止“假”画布偏移。

【解决方案2】：

你也可以看看这些提示的集合：http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

【讨论】：

【解决方案3】：

对于双画布问题，记录了一个错误 https://code.google.com/p/android/issues/detail?id=35474，您可能需要查看建议的解决方案。

就我而言，这个问题只有在我启用了强制 GPU 渲染时才会出现。

如果您有一些具有 CSS overflow: hidden 的画布父元素，通常会出现问题

【讨论】：

【解决方案4】：

从所有画布父级中删除溢出属性，可能我们在触摸设备上不需要此属性：

$("canvas").parents("*").css("overflow", "visible");

http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/有很好的解释

【讨论】：