Android Native Browser复制HTML5画布（镀铬质量好）

Question

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

这也已经在其他Android手机和平板电脑上进行了测试，例如Nexus 7和Galaxy S4，但他们的原生浏览器是镀铬的，所以看起来很好。 任何IOS浏览器，Windows桌面浏览器或Mac桌面浏览器也不存在此问题。

这几乎是因为网页自身加载了两次！

因为有一个重复的canvas元素，它会像主画布那样更新。

在这里它似乎只有在横向模式下旋转才会发生，但我相信在纵向模式下，画布'完全对齐在顶部。

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

我完全不知所措。

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

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

任何有关这方面的见解都可能会很棒！ 提前致谢。

- 编辑

我也把这个测试alert(document.getElementsByTagName('canvas').length);放入alert(document.getElementsByTagName('canvas').length); 看看DOM中是否有2个画布，但它返回1！

Answer 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);

}

通过调整不透明度，这会强制画布重绘并删除重复的形状。 这是一个愚蠢的修复，但它的工作原理。 希望这有助于某人。

Answer 2

您也可以查看这些技巧的集合： http ： //slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Answer 3

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

在我的情况下，只有在启用强制GPU渲染的情况下才会出现此问题。

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

Answer 4

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

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

http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/对此进行了详细解释。