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);中看看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);

}

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