Diferencias entre Chrome y Firefox

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 Correcto en Chrome, Correcto en Firefox.

En los casos en los que el comportamiento del navegador se puede considerar erróneo, se indica con los iconos Incorrecto en Chrome, Incorrecto en Firefox

HTML

Imágenes

Imágenes AVIF animadas

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.

Correcto en Chrome Incorrecto en Firefox
<img src="alpha_video.avif" alt="Ejemplo de imagen animada en formato AVIF"
    width="252" height="189"
    style="background-color: peru">
ERROR (no puede mostrarse el objeto)
Enlace externo

La imagen del ejemplo es una de las imágenes de prueba del repositorio oficial av1-avif.

Bug de Firefox relacionado:

CSS

Fuente

Propiedad font-style

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).

Incorrecto en Chrome Correcto en Firefox
p.italic {
  font-family: "Latin Modern Roman 10";
  font-style: italic;
}

p.oblique {
  font-family: "Latin Modern Roman 10";
  font-style: oblique;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El ejemplo anterior da el siguiente resultado en Firefox 62:

Ejemplo de fuente oblique e italic

Texto

Propiedad text-decoration: overline

Si un párrafo tiene sobrerrayado y el tamaño de las palabras no es siempre el mismo:

  • Chrome dibuja la línea en la parte superior de cada carácter, desplazándola verticalmente en función del tamaño del carácter.
  • Firefox mantiene la línea de sobrerrayado a la misma altura a lo largo de todo el párrafo, pero basándose en el texto de menor tamaño.

Probablemente, la recomendación no especifica qué hacer en este caso particular y cada navegador ha adoptado una solución diferente (por confirmar)

Por determinar en Chrome Por determinar en Firefox
<p style="text-decoration: overline">
  Un
  <span style="font-size: 200%">párrafo</span>
  <span style="font-size: 300%">sobrerrayado</span>.
</p>

<p style="text-decoration: overline">
  <span style="font-size: 300%">Otro</span>
  <span style="font-size: 200%">párrafo</span>
  sobrerrayado.
</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Posicionamiento

Posicionamiento flotante de caracteres: letra capital

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%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p.capital::first-letter {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: En realidad no tengo claro si quien lo hace bien es Firefox o Chrome.