En esta página se recopilan las diferencias entre Chrome y Firefox que aparecen en otras lecciones de estos apuntes. Esta página no pretende ser una relación exhaustiva de diferencias, sino simplemente recopilar las diferencias que encontré al redactar estos apuntes y en algún caso ofrecer más información que en la lección.
En los casos en los que el comportamiento del navegador se puede considerar correcto, se indica con los iconos ,
.
En los casos en los que el comportamiento del navegador se puede considerar erróneo, se indica con los iconos ,
Google Chrome muestra correctamente las imágenes animadas en formato AVIF, pero Firefox no lo hace. En el ejemplo siguiente, las dos primeras franjas del dibujo deberían ir cambiando de color, la primera lentamente y la segunda rápidamente.
<img src="alpha_video.avif" alt="Ejemplo de imagen animada en formato AVIF"
width="252" height="189"
style="background-color: peru">
La imagen del ejemplo es una de las imágenes de prueba del repositorio oficial av1-avif.
Bug de Firefox relacionado:
Si el ordenador dispone de fuentes que tengan ambas variantes, Firefox distingue entre los valores italic y oblique de la propiedad font-style, mientras que Google Chrome no lo hace.
El ejemplo siguiente puede verse correctamente en Firefox una vez instalada la fuente libre Latin Modern Roman (realmente son 11 fuentes distintas para cubrir las variantes más habituales).
p.italic {
font-family: "Latin Modern Roman 10";
font-style: italic;
}
p.oblique {
font-family: "Latin Modern Roman 10";
font-style: oblique;
}
El ejemplo anterior da el siguiente resultado en Firefox 62:
Si un párrafo tiene sobrerrayado y el tamaño de las palabras no es siempre el mismo:
Probablemente, la recomendación no especifica qué hacer en este caso particular y cada navegador ha adoptado una solución diferente (por confirmar)
Firefox no muestra los dos ejemplos siguientes de la misma manera, mientras que Chrome sí lo hace.
span.capital {
float: left;
background-color: pink;
color: red;
font-family: monospace;
font-size: 400%;
}
p.capital::first-letter {
float: left;
background-color: pink;
color: red;
font-family: monospace;
font-size: 400%;
}
Nota: En realidad no tengo claro si quien lo hace bien es Firefox o Chrome.