Tenemos muchos usuarios que usan dispositivos Apple y/o navegadores basados en webkit que informan problemas al desplazarse por los temas hasta el punto de que el foro no se puede usar.
Después de investigar bastante, parece que la causa más probable es cómo webkit es… ¿cómo lo digo amablemente?.. basura manejando el redimensionamiento de imágenes.
Sin embargo, eso también me llevó a notar cómo se renderizan los emojis en el HTML cocinado y me gustaría alguna aclaración porque tal vez me estoy perdiendo alguna configuración que podría haber hecho y que evitó esto.
En azul/cian/lo que sea los atributos predeterminados agregados por Discourse al cocinar el contenido.
En rojo el CSS agregado por el plugin que escribí que:
importa los emojis (son bastantes)
agrega algo de CSS personalizado para que se rendericen correctamente ya que no todos son “20 por 20”
Ahora he realizado una prueba simple. Eliminé del campo cooked en la base de datos para ese tema, todos los width="20" height="20" y pedí a los usuarios que lo intentaran de nuevo y visualizaran el tema, desplazándose, respondiendo incluso si alguien está agregando nuevas publicaciones pero sin usar emojis para no inyectar nuevamente esos dos atributos en el HTML renderizado de los emojis.
Aparentemente, eso es lo que está causando los problemas en webkit, ya que todos los informes que tengo confirman que ahora que esos dos atributos se eliminaron, no hay problemas con el desplazamiento.
Entonces, ¿hay alguna forma de evitar que Discourse agregue esos parámetros? ¿Por qué Discourse asume que todos los emojis serán “20x20” y, además, lo impone a través de atributos HTML en lugar de usar CSS?
Pude reproducirlo en mi iPad pero no en Chrome de escritorio.
Me desplazo hacia arriba y la línea de tiempo retrocede a la publicación anterior, lo que dificulta desplazarme y avanzar más en la línea de tiempo.
Pero me cuesta reproducirlo de manera consistente. Me quedé atascado en la publicación #1955, pero después de poder desplazarme hacia arriba, si volvía a bajar y me desplazaba hacia arriba de nuevo, ya no me bloqueaba
La razón es que ocurre cada vez que un nuevo emoji se está “cargando de forma diferida” y los atributos de tamaño se están renderizando.
Una vez renderizado, el problema no ocurre. Pero si navegas por un tema con muchas respuestas y en el que se utilizan bastantes emojis, verás constantemente que este comportamiento ocurre y hará que el uso de Discourse sea imposible.
Logramos “solucionarlo” en nuestro tema personalizado, pero creo que esto debería abordarse también en el tema predeterminado, o mejor aún, en la función que procesa las publicaciones, ya que no veo ninguna razón para que se apliquen esos atributos HTML relacionados con el tamaño en lugar de usar CSS simple.
Añadiré que todos los navegadores para iOS parecen usar webkit, por lo que será un problema principalmente para los dispositivos Apple. Sin embargo, no soy un experto en ello, así que tómate esto con cautela. Se requerirían más pruebas.
Esto se debe a que todos los emojis estandarizados de Unicode están diseñados para caber en un cuadrado, y asumimos que los sitios querrán que sus emojis tengan un tamaño uniforme de una manera que funcione junto con el texto y otros emojis si esa tetera fuera de 50x50, crearía un gran espacio entre líneas como este:
Cuando se incluyen los atributos width y height de una imagen en un elemento <img HTML, el navegador puede calcular la relación de aspecto de la imagen antes de que se cargue. Esta relación de aspecto se utiliza para reservar el espacio necesario para mostrar la imagen, reduciendo o incluso previniendo un cambio de diseño cuando la imagen se descarga y se muestra en la pantalla. Reducir el cambio de diseño es un componente importante de una buena experiencia de usuario y rendimiento web.
…
…
Si bien las mejores prácticas de los desarrolladores de la última década pueden haber recomendado omitir los atributos width y height de una imagen en un elemento <img HTML, debido al mapeo de la relación de aspecto, incluir estos dos atributos se considera una mejor práctica para los desarrolladores.
Dicho todo esto, tienes un ejemplo razonable de un caso en el que el tamaño predeterminado no funcionará para todos los emojis… ese viejo emoji de brindis es 3 veces más ancho, por lo que no encaja bien en un cuadrado. No es inusual que otras aplicaciones limiten todos los emojis a cuadrados, por lo que no somos demasiado inusuales en nuestro comportamiento aquí (tanto Slack como Discord lo hacen, por ejemplo)… pero alternativamente, podríamos considerar permitir que los emojis personalizados tengan dimensiones opcionalmente establecidas.
El trabajo más difícil está en la parte de “emoji personalizados” y la representación de emoji:
Los emoji personalizados necesitan un atributo adicional para cada emoji: aspect-ratio (o como alternativa height y width).
La representación de emoji debe usar el nuevo atributo aspect-ratio para que los emoji personalizados varíen el width en consecuencia – height se mantiene en 20px.
Enfoque rápido y fácil para emoji personalizados:
Para los emoji personalizados, las etiquetas img establecen solo height="20" y no establecen width en absoluto, desechando así el beneficio de establecer la relación de aspecto/ancho y alto.
CSS: img.emoji { width: auto; }
si esa tetera fuera de 50x50, crearía un gran espacio entre líneas como este: