Natywna przeglądarka systemu Android powielanie płótna HTML5 (w porządku w chromie)

Question

To jest dziwny problem, który mam tylko w przeglądarce macierzystej na tabletach Samsung Galaxy Tab 2 i Galaxy S2 w macierzystej przeglądarce.

Zostało to również przetestowane na innych telefonach i tabletach z Androidem, takich jak Nexus 7 & Galaxy S4, ale ich natywna przeglądarka jest chromowana, więc wydaje się być w porządku. Ten problem nie występuje również w przeglądarkach IOS, przeglądarkach Windows Desktop i przeglądarkach Mac Desktop.

To prawie tak, jak strona jest ładowana dwa razy z góry!

Ponieważ istnieje duplikat elementu canvas, który aktualizuje się tak, jak robi to główne płótno.

Tutaj wydaje asthough to tylko dzieje się, gdy obraca się w trybie poziomym, jednak wierzę, że w trybie portretowym, płótno są idealnie dopasowane na górze.

Co jest jeszcze dziwniejsze, przycisk menu, który widzisz to przycisk przełącznika, dotknij, aby otworzyć menu, dotknij, aby zamknąć menu. Na tym urządzeniu po dotknięciu otwiera się i zamyka natychmiast. to samo dzieje się w przypadku przełączania przycisku wyciszenia.

Jestem kompletnie zagubiony.

Zrobiłem kilka debugowania javascript rzucając kilka alertów tu i tam, a funkcje inicjalizacyjne, które tworzą odniesienia do płótna i tak dalej, są wywoływane tylko raz.

Przeczytałem i słyszałem o przyspieszaniu sprzętowym powodującym problemy, ale rozwiązania, które udało mi się znaleźć, odnoszą się tylko do budowania natywnych aplikacji! nie stron internetowych w kanale HTML5.

Wszelkie informacje na ten temat mogą być przydatne! Z góry dzięki.

--edit

ja również umieścić w tym teście alert(document.getElementsByTagName('canvas').length);, aby zobaczyć, czy nie było 2 płótno w DOM ale zwraca 1!

Answer 1

Wpadłem na ten sam problem. Udało mi się rozwiązać ten problem poprzez uruchomienie następujący kod po wprowadzeniu zmian do mojego płótnie:

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

} 

przez szczypanie krycie, to zmuszony płótno na przerysowanie i usuwa duplikaty kształtów. To durna poprawka, ale działa. Mam nadzieję, że to pomoże komuś.

Answer 2

W przypadku podwójnego problemu z płótnem istnieje błąd z logowaniem https://code.google.com/p/android/issues/detail?id=35474, możesz sprawdzić sugerowane rozwiązania.

W moim przypadku problem pojawił się tylko wtedy, gdy włączono renderowanie Force GPU.

Problem zwykle pojawia się, jeśli masz jakiś element nadrzędny na płótnie, który ma CSS overflow: hidden

Answer 3

może również spojrzeć na ten kolekcjach takich porad: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Answer 4

Usuń właściwość przelewowy ze wszystkich rodziców płótnie, prawdopodobnie my nie „t trzeba tę właściwość na urządzeniach dotykowych:

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

jest dobrze wyjaśnione w http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/