13

这是一个奇怪的问题，我只在本机浏览器中的三星 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！

4

4 回答 4

11

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

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

}

通过调整不透明度，这迫使画布重新绘制并删除重复的形状。这是一个愚蠢的修复，但它有效。希望这可以帮助某人。

于 2013-09-25T19:52:37.703 回答
2

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

于 2014-04-01T15:56:20.063 回答
1

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

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

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

于 2014-02-18T08:51:26.927 回答
1

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

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

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

于 2014-12-04T13:59:04.150 回答