Highcharts: Android Chrome se bloquea al abrir la página de demostración

Lo mismo en pixel 3, android chrome 78.0.3904.62

En realidad, este es un problema muy urgente, ya que tenemos muchos gráficos en todo el sitio web y no son accesibles y tienen un gran impacto negativo para UX.

¡Gracias por reportar este problema!

Probado con Android v9.0:

• v76.0.3809.132 - sin problemas
• v77.0.3865.116 - sin problemas

Probado con Android v9.1

• v78.0.3904.62 - Chrome congelado

¿Alguna actualización?

El BrowserStack aún no tiene v78, pero nuestros desarrolladores (@ jon-a-nygaard y @oysteinmoseng ) ahora están depurando en dispositivos físicos.

Según nuestra investigación hasta ahora, parece que ha habido una disminución del rendimiento en la representación de SVG complejo en Android Chrome v78.0.3904.62. En este ejemplo, son caminos con trazos grandes.

Aislamos el problema en un svg relativamente simple con algunos elementos, donde uno de los atributos de transformación de elementos se actualiza con un intervalo rápido.
Al abrir la página de presentación a continuación en Android Chrome v78.0.3904.62, puede ver que se congelará por un tiempo antes de que a veces se ponga al día y funcione como debería. En versiones anteriores funciona sin problemas desde el principio.

• Ejemplo de JSFiddle
• Ejemplo de página de presentación

Hemos informado del problema al Soporte de Google Chrome y esperamos que puedan resolverlo o brindar más información sobre la causa del problema.

@ jon-a-nygaard ¿Algún comentario de Google Chrome?
¿Podría agregar un enlace al informe de problemas? Gracias

Hola @ anki247 ,

Lamentablemente, no he recibido ningún comentario del equipo de asistencia de Google Chrome y, lamentablemente, sus informes de problemas no están disponibles para el público.

Sin embargo, la buena noticia es que hoy descubrí que el problema también podría reproducirse en Chromium, y lo he informado a The Chromium Projects. Este informe de problemas está disponible en https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

Para aquellos interesados ​​en probar en Chromium, la aplicación de Android se puede descargar desde https://download-chromium.appspot.com/

@ jon-a-nygaard
Por favor, eche un vistazo a esa demostración, accidentalmente encontré una página donde se mostraba exactamente el mismo gráfico sin ningún error.
Después de pasar horas descubrí que algunas estructuras HTML y clases / reglas CSS tienen algún impacto.

• Ejemplo de JSFiddle
• Ejemplo de página de presentación

Lo único diferente de este JSFiddle de su ejemplo es la parte CSS Y este HTML antes del gráfico. Pero aquí funciona perfectamente en Android Chrome: -S
`` ``

Gracias @ anki247 ,

¡Esa es una observación interesante! No sé qué significa esto técnicamente, pero he pasado la información a The Chromium Projects con la esperanza de que esto ayude a su progreso.

@ anki247 impresionante. Simplemente puse esto en el mismo color que el fondo de mi página donde viven los gráficos, y parece haber solucionado el problema. Gran solución por ahora

@ anki247 ¿Tiene un jsfiddle que muestra cómo se bloquea y cuáles son los cambios exactos que hizo para evitar que se bloquee?

@baerrach
Chocando:

• https://jsfiddle.net/jon_a_nygaard/1c7Lpefm/
• https://jsfiddle.net/jon_a_nygaard/1c7Lpefm/show

"Solución alternativa": (En realidad, no se pretendía que fuera una solución alternativa ... más bien una demostración ^^)

• https://jsfiddle.net/6w59qaod/11/
• https://jsfiddle.net/6w59qaod/11/show

Como mencioné anteriormente, la diferencia entre ellos es solo la

• Parte CSS
• siguiente parte HTML encima del gráfico
  `` ``
  

¡Gracias por los detalles y la solución!

¡Hola equipo de highcharts!

¿Tiene alguna actualización sobre este tema? ¿Recibiste alguna respuesta del equipo de Chrome? Desarrollamos una aplicación que usa SVG y tenemos exactamente el mismo problema en Chrome @ Android. Intenté encontrar una solución en Google y solo una página que encontré es este hilo. Intentamos utilizar la solución alternativa publicada anteriormente, pero desafortunadamente, no funcionó para nosotros.

El problema informado sigue siendo válido. Puede verificar el estado actual del caso aquí: https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

Vemos este problema con casi todos los conjuntos de datos que estamos tratando de graficar. Dado que esto es obviamente un largo plazo en Google, ¿hay más soluciones alternativas conocidas que los hallazgos de @ anki247 anteriores (que no parecen funcionar en nuestro caso)? ¿Diferentes tipos de gráficos? ¿Número máximo de muestras?

El uso de Highcharts Boost ayuda, especialmente en dispositivos móviles.

Reducir la densidad de puntos de datos también ayuda. Dependiendo de cuántas series y gráficos tenga que representar en una página, un máximo de 500 puntos de datos por serie parece procesarse sin problemas en la mayoría de los dispositivos. Puede hacer que la cantidad de puntos de datos dependa del ancho de la pantalla.