7 errores crónicos del navegador que plagan la web

Los navegadores web son increíbles. Si no fuera por los navegadores, no podríamos conectarnos tan bien con los usuarios y los clientes si se vierten nuestros datos y documentos en sus computadoras de escritorio, tabletas y teléfonos. Por desgracia, todo el contenido maravilloso que ofrece el navegador web nos hace sentir mucho más frustrados cuando el renderizado no es tan elegante o libre de errores como nos gustaría.

Cuando se trata de desarrollar sitios web, estamos tan a merced de los navegadores como en deuda con ellos. Cualquier falla en cualquier plataforma salta, especialmente cuando bloquea las máquinas de nuestros usuarios. Y con el diseño como una prima para destacar o encajar, cualquier línea gruesa o toque de color mal aplicado destruye la experiencia estética que hemos trabajado para crear. Incluso el más mínimo error, como agregar un píxel adicional al ancho de una línea o desalinear una tabla un poco, puede resultar en una experiencia de usuario frustrante, sin mencionar el costo de descubrirlo, examinarlo y solucionarlo.

Por supuesto, solía ser peor. Las grandes diferencias entre los navegadores se han borrado en gran medida gracias a la fidelidad a los estándares web del W3C. Y las diferencias que permanecen pueden ignorarse en general, gracias a la proliferación de bibliotecas como jQuery, que no solo facilitan la piratería de JavaScript, sino que también disimulan las formas en que los navegadores no son iguales.

Estas bibliotecas tienen la costumbre de congelar los errores del navegador en su lugar. Si las empresas de navegadores corrigen algunos de sus peores errores, las nuevas "correcciones" pueden alterar los parches antiguos y las soluciones alternativas. De repente, la "solución" se convierte en el problema que está alterando la antigua estabilidad que hemos manipulado en torno al error. Los programadores no pueden ganar.

La estabilidad que brindan las bibliotecas como jQuery también ha alentado a los desarrolladores de navegadores a acelerar y automatizar los procesos de actualización de sus navegadores. Mozilla se compromete a lanzar una nueva versión de Firefox cada pocos meses. En el pasado, cada versión sería un objetivo estable para los desarrolladores web, y podríamos poner un pequeño GIF en nuestros sitios afirmando que funcionan mejor en, digamos, IE5. Ahora el odómetro gira tan rápido que se lanzará una nueva versión de Firefox en el tiempo que tarda el HTML en viajar desde el servidor al cliente.

Mientras tanto, pedimos a los navegadores que hagan mucho más. El sitio web de mi periódico local pone de rodillas mi máquina: expandiendo anuncios emergentes, fragmentos de video que se reproducen automáticamente, código para personalizar anuncios en mi historial de navegación reciente. Si mi hija mira un sitio web de muñecas, JavaScript está tratando desesperadamente de encontrar un anuncio de muñecas para mostrarme. Toda esta magia enciende la CPU.

Todo esto significa que los errores del navegador de hoy son más raros pero más difíciles de precisar. Aquí hay un vistazo a los últimos géneros de errores de navegador que plagan, o en muchos casos, simplemente molestan, a los diseñadores y desarrolladores web.

Diseño

Los errores de navegador más visibles son los fallos de diseño. La base de datos de errores Bugzilla de Mozilla tiene 10 secciones para problemas de diseño, y eso no incluye problemas de diseño categorizados como relacionados con DOM, CSS o Canvas. El trabajo más importante del navegador es organizar el texto y las imágenes, y hacerlo bien a menudo es difícil.

Muchos errores de diseño pueden parecer pequeños hasta el punto de ser casi esotéricos. El error 1303580 de Bugzilla, por ejemplo, llama a Firefox por usar la versión en cursiva de una fuente cuando las etiquetas CSS piden oblicua. Quizás solo un adicto a las fuentes lo notaría. Mientras tanto, el error 1296269 de Bugzilla informa que partes de las letras en Comic Sans están cortadas, al menos en Windows. Los diseñadores de fuentes hacen una distinción y les importa. Cuando no pueden obtener el aspecto y la sensación exactos en todos los navegadores, los diseñadores web pueden sentirse quizás un poco demasiado frustrados.

Hay cientos, miles, quizás incluso millones de estos errores. En, hemos encontrado problemas con imágenes que desaparecen en nuestro editor CMS y etiquetas de extensión que aparecen solo en el DOM.

Pérdidas de memoria

A menudo es difícil notar las pérdidas de memoria. Por definición, no cambian ninguna propiedad visible. El sitio web se representa correctamente, pero el navegador no se limpia después del hecho. Demasiados viajes a sitios web que desencadenan la fuga y su máquina se ralentiza porque toda la RAM está bloqueada y contiene una estructura de datos que nunca se reutilizará. Por lo tanto, el sistema operativo intercambia frenéticamente bloques de memoria virtual en disco y usted pasa su tiempo esperando. La mejor opción es reiniciar su máquina.

Los detalles de los errores de fuga de memoria pueden ser tremendamente misteriosos, y tenemos suerte de que algunos programadores se tomen el tiempo para solucionarlos. Considere el problema 640578 de la pila del navegador Chronium. Cambiar una parte del DOM jugando con la innerHTMLpropiedad pierde memoria. Un fragmento de código de muestra con una llamada de bucle repetida y ajustada requestAnimationFrameduplicará el problema. Hay decenas de problemas como este.

Por supuesto, no siempre es culpa del navegador. El problema de Chromium 640922, por ejemplo, también detalla una pérdida de memoria y proporciona un ejemplo. Sin embargo, un análisis más detallado muestra que el código de ejemplo estaba creando Date()objetos a lo largo del camino para probar el tiempo, y probablemente eran la fuente del problema.

Destello

Es bastante oficial. Todos se han olvidado de las maravillosas ilustraciones y videos web suavizados que Adobe Flash trajo a la web. En cambio, lo culpamos por todos los accidentes que pueden o no haber sido culpa suya. Ahora se está retirando oficialmente, pero no va rápido. Incluso algunas de las empresas más progresistas que impulsan los estándares web todavía parecen tener código Flash en sus páginas. Me sorprende la frecuencia con la que encuentro código Flash fuera de los sitios web de MySpace y GeoCities.

Toques y clics

No es fácil hacer malabares con los distintos tipos de entrada, especialmente ahora que las tabletas y los teléfonos generan toques que pueden o no actuar como un clic del mouse. No debería sorprendernos entonces encontrar que hay muchos errores en esta área. El framework Bootstrap JavaScript mantiene una lista de sus errores más exasperantes, y algunos de los peores caen en esta categoría.

Safari, por ejemplo, a veces perderá los toques de los dedos en el texto de la etiqueta (151933). A veces, los menús no funcionan en el iPad porque el navegador ha desplazado el rectángulo para buscar la entrada (150079). A veces, los clics desencadenan un movimiento extraño en el artículo, que incluso puede parecer que lo hizo un diseñador vanguardista a propósito (158276). Todo esto genera confusión cuando el texto o las imágenes en la pantalla no reaccionan de la manera que esperamos.

Vídeo

El plan siempre ha sido simplificar la entrega de audio y video moviendo la responsabilidad dentro del navegador y fuera del mundo de los complementos. Esto ha eliminado los problemas de interfaz, pero no ha eliminado todos los problemas. La lista de errores de video es larga y muchos de ellos son demasiado visibles. La entrada de Bugzilla 754753 describe "principalmente manchas rojas y verdes que contienen varias imágenes fantasmas", y la entrada de Bugzilla 1302991 "tartamudea por falta de una palabra mejor".

Algunos de los problemas más complejos están surgiendo a medida que los navegadores integran los diversos mecanismos de cifrado diseñados para prevenir la piratería. El error 1304899 sugiere que Firefox no está descargando automáticamente el mecanismo de cifrado correcto (EME) de Adobe. ¿Es culpa de Firefox? ¿Adobe? ¿O tal vez un proxy extraño?

Los errores de video seguirán dominando. La integración de video web con otras formas de contenido mediante la adición de etiquetas de video a HTML5 ha abierto muchas posibilidades nuevas para los diseñadores, pero cada nueva posibilidad significa nuevas oportunidades para que aparezcan errores e inconsistencias.

Flotando

La capacidad de la página web de seguir el movimiento del mouse por la página ayuda a los diseñadores web a dar a los usuarios pistas sobre las características que pueden estar ocultas detrás de una imagen o palabra. Por desgracia, los eventos flotantes no siempre ascienden en la cadena tan rápido como podrían.

El nuevo navegador Microsoft Edge, por ejemplo, no oculta el cursor cuando el mouse se desplaza sobre algunos elementos de entrada (817822). A veces, el vuelo estacionario no termina (5381673). A veces, el evento de desplazamiento está vinculado al elemento incorrecto (7787318). Todo esto conduce a la confusión y desalienta el uso de un efecto bastante limpio.

Software malicioso

Si bien es tentador echar toda la culpa de los errores del navegador a los desarrolladores de navegadores, a menudo es injusto. Muchos de los problemas son causados ​​por malware diseñado para hacerse pasar por extensiones o complementos útiles. En muchos casos, el malware hace algo realmente útil mientras roba secretamente clics o comercio en segundo plano.

El problema es que la interfaz de extensión es bastante poderosa. Una extensión puede insertar códigos y etiquetas arbitrarios en todos los sitios web. En las manos adecuadas, esto es genial, pero es fácil ver cómo el nuevo código de la extensión puede chocar con el código del sitio web. ¿Qué? ¿No querías redefinir el comportamiento de la $función?

Esto no es tanto un error como un problema filosófico profundo con una característica muy interesante. Pero un gran poder conlleva una gran responsabilidad, quizás mayor de la que puede reunir cualquier programador de extensión. La mejor manera de ver este problema es darse cuenta de que es un área donde nosotros, los usuarios, tenemos el control. Podemos desactivar las extensiones y limitarlas a unos pocos sitios web donde no haya problemas. La API es demasiado poderosa para el uso diario, tan poderosa que es tentador llamar a las API de extensiones como los errores más grandes de todos. Pero eso negaría todo lo que hace por nosotros.

Artículos relacionados

  • Más allá de jQuery: una guía experta sobre marcos de JavaScript
  • Revisión: 7 IDE de JavaScript puestos a prueba
  • Tiroteo en HTML5: cómo se comparan Chrome, Safari, Firefox, IE y Opera
  • Revisión: 13 frameworks web primo Python
  • El poder de la programación perezosa
  • Descargar: Guía de desarrollo profesional para desarrolladores
  • 7 malas ideas de programación que funcionan
  • 9 malos hábitos de programación que amamos en secreto
  • 21 tendencias de programación calientes - y 21 enfriar