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/對此進行了詳細解釋。