Android Native Browser, дублирующий холст HTML5 (отлично в хроме)

Это странная проблема, которую я испытываю только в своем браузере на Samsung Galaxy Tab 2 и Galaxy S2 в собственном браузере.

Это также было протестировано на других телефонах и планшетах Android, таких как Nexus 7 и Galaxy S4, но их собственный браузер - хром, поэтому он выглядит отлично. Эта проблема также отсутствует в любых браузерах IOS, браузерах Windows Desktop или браузерах Mac Desktop.

Это почти так же, как веб-страница загружается дважды поверх самой себя!

Так как существует повторяющийся элемент canvas, который обновляется по мере того, как делает основной холст.

Здесь он появляется, хотя это происходит только при повороте в ландшафтном режиме, но я верю, что в портретном режиме холст "отлично выравнивается сверху".

Что еще странно, кнопка меню, которую вы видите, является кнопкой переключения, нажмите, чтобы открыть меню, нажмите, чтобы закрыть меню. На этом устройстве, когда вы нажимаете его, он открывается и закрывается мгновенно. то же самое происходит при переключении кнопки отключения звука.

Я полностью в растерянности.

Я сделал некоторую отладку javascript, бросая несколько предупреждений здесь и там, а функции инициализации, которые создают ссылки на холст и т.д., вызывается только один раз.

Я читал и слышал об аппаратном ускорении, вызывающем проблемы, но решения, которые я потенциально нашел, относятся только к созданию родных приложений! а не веб-страницы холста HTML5.

Любое понимание этого может быть здорово! Спасибо заранее.

- EDIT

Я также поставил в этом тесте alert(document.getElementsByTagName('canvas').length);, чтобы увидеть, было ли в DOM 2 холста, но он возвращает 1!

Ответ 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);

}

Изменяя непрозрачность, это заставило холст перерисовать и удалить дубликаты. Это глупое исправление, но оно работает. Надеюсь, это поможет кому-то.

Ответ 2

Также вы можете посмотреть эти коллекции таких советов: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Ответ 3

Для проблемы с двойным холстом существует ошибка, зарегистрированная https://code.google.com/p/android/issues/detail?id=35474, которую вы можете проверить предлагаемые решения.

В моем случае эта проблема возникла только в том случае, если включен принудительный рендеринг Force GPU.

Проблема возникает, если у вас есть родительский элемент для холста с CSS overflow: hidden

Ответ 4

удалить свойство переполнения со всех родительских холстов, возможно, нам не нужно это свойство на сенсорных устройствах:

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

Это хорошо объяснено в http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/