Pregunta Navegador nativo de Android que duplica el lienzo HTML5 (bien en Chrome)


Este es un problema extraño que solo estoy experimentando en un navegador nativo en Samsung Galaxy Tab 2 y Galaxy S2 en el navegador nativo.

Esto también se ha probado en otros teléfonos y tabletas con Android, como el Nexus 7 y el Galaxy S4, pero su navegador nativo es Chrome, por lo que parece estar bien. Este problema tampoco está presente en ningún navegador IOS, navegadores Windows Desktop o navegadores de escritorio Mac.

¡Es casi como si la página web se cargara dos veces encima de sí misma!

Como hay un elemento de lienzo duplicado, se actualiza como lo hace el lienzo principal.

enter image description here enter image description here

Aquí aparece, aunque solo ocurre cuando se gira en modo horizontal, pero creo que en el modo vertical, el lienzo "está perfectamente alineado sobre la parte superior.

Lo que es aún más extraño, el botón de menú que ve es un botón para alternar, toque para abrir el menú, toque para cerrar el menú. En este dispositivo cuando lo toca, se abre y se cierra al instante. lo mismo ocurre con el botón de silenciar alternar.

Estoy completamente perdido.

He hecho algunas depuraciones de JavaScript lanzando algunas alertas aquí y allá, y las funciones de inicialización que crean referencias al lienzo y demás solo se llaman una vez.

He leído y escuchado acerca de la aceleración del hardware que causa problemas, ¡pero las soluciones que he encontrado potencialmente son solo relativas a la creación de aplicaciones nativas! no páginas web de HTML5 Canvas.

¡Cualquier idea sobre esto podría ser genial! Gracias por adelantado.

--EDITAR

También puse esta prueba alert(document.getElementsByTagName('canvas').length); para ver si había 2 lienzos en el DOM pero devuelve 1!


13
2017-08-16 11:11


origen


Respuestas:


Me encontré con este mismo problema. Pude solucionarlo ejecutando el siguiente código después de realizar un cambio en mi lienzo:

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

}

Al ajustar la opacidad, esto obligó al lienzo a volver a dibujar y eliminar las formas duplicadas. Es una solución tonta, pero funciona. Espero que esto ayude a alguien.


11
2017-09-25 19:52



También puede consultar estas colecciones de tales consejos: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/


2
2018-04-01 15:56



Para el problema de doble lienzo, se ha registrado un error https://code.google.com/p/android/issues/detail?id=35474 es posible que desee comprobar las soluciones sugeridas.

En mi caso, este problema apareció solo si tenía habilitada la renderización Force GPU.

El problema generalmente aparece si tienes algún elemento principal para el lienzo que tiene CSS overflow: hidden


1
2018-02-18 08:51



elimina la propiedad de desbordamiento de todos los lienzos principales, probablemente no necesitemos esta propiedad en los dispositivos táctiles:

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

Está bien explicado en http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/


1
2017-12-04 13:59