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.

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

Utilización del navegador

Archivos CSS en UTF-8

Ni Firefox ni Chrome muestran correctamente los caracteres no ingleses en los archivos CSS guardados en el juego de caracteres UTF-8, si no reciben el juego de caracteres en la cabecera Content-Type. La línea inicial @charset "utf-8" permitida en el borrador de la recomendación CSS Syntax Module Level 3 tampoco parece funcionar ni en Firefox ni Chrome.

Enlace a hoja de estilo con caracteres no ingleses

Zoom

Firefox dispone de dos tipos de zoom:

En Firefox los dos tipos de zoom funcionan mediante el menú Ver > Tamaño, con las combinaciones de teclas Ctrl++ y Ctrl+- o con la combinación Ctrl+rueda del ratón. La opción del menú Ver > Tamaño >Sólo ampliar texto permite elegir el tipo de zoom a aplicar.

Recarga de formularios con F5

Al recargar una página web (con la tecla F5):

Si se recarga la página con el atajo de teclado Ctrl+F5, Firefox sí que reinicia los controles de formulario.

Para comprobarlo, abra el ejemplo siguiente haciendo clic en el icono situado en la parte derecha del ejemplo y compruebe el funcionamiento en Firefox o Chrome:

Enlace externo

HTML

Unicode

Presentación texto/emoji

Algunos caracteres Unicode tienen tanto presentación texto como presentación emoji. Una de las dos es la predeterminada y la otra se selecciona añadiendo los selectores de variación VS15 (︎) o VS16 (️)

En algunos casos, tanto Firefox como Chrome muestran correctamente todos los caracteres. En la primera línea del ejemplo siguiente se muestra un carácter que tiene presentación predeterminada emoji. En la segunda línea se muestran un carácter que tiene presentación predeterminada texto.

<p>
  &#x231a; <span style="font-size: 300%">&#x231a;</span>
  &#x231a;&#xfe0e; <span style="font-size: 300%">&#x231a;︎</span>
  &#x231a;&#xfe0f; <span style="font-size: 300%">&#x231a;️</span>
</p>
<p>
  &#x2639; <span style="font-size: 300%">&#x2639;</span>
  &#x2639;&#xfe0e; <span style="font-size: 300%">&#x2639;&#xfe0e;</span>
  &#x2639;&#xfe0f; <span style="font-size: 300%">&#x2639;️</span>
</p>
Enlace externo

En otros casos, Google Chrome no muestra correctamente la forma de presentación predeterminada (texto o emoji) correcta. En el ejemplo siguiente se muestran un carácter que tienen presentación predeterminada texto, pero Chrome lo muestra como emoji.

Incorrecto en Chrome Correcto en Firefox
<p>
  &#x261d; <span style="font-size: 300%">&#x261d;</span>
  &#x261d;&#xfe0e; <span style="font-size: 300%">&#x261d;&#xfe0e;</span>
  &#x261d;&#xfe0f; <span style="font-size: 300%">&#x261d;&#xfe0f;</span>
</p>
Enlace externo

En otros casos, Firefox muestra una representación en modo texto al añadir el selector de variación VS15 (&#xfe0e;), aunque ese emoji no tenga representación en modo texto.

Correcto en Chrome Incorrecto en Firefox
<p>
  &#x1f600; <span style="font-size: 300%">&#x1f600;</span>
  &#x1f600;&#xfe0e; <span style="font-size: 300%">&#x1f600;&#xfe0e;</span>
  &#x1f600;&#xfe0f; <span style="font-size: 300%">&#x1f600;&#xfe0f;</span>
</p>
Enlace externo

En otros casos, Google Chrome no muestra la representación en modo texto al añadir el selector de variación VS15 (&#xfe0e;), aunque ese emoji sí tenga representación en modo texto.

Incorrecto en Chrome Correcto en Firefox
<p>
  &#x1f610; <span style="font-size: 300%">&#x1f610;</span>
  &#x1f610;&#xfe0e; <span style="font-size: 300%">&#x1f610;&#xfe0e;</span>
  &#x1f610;&#xfe0f; <span style="font-size: 300%">&#x1f610;&#xfe0f;</span>
</p>
Enlace externo

Modificadores Fitzpatrick en caracteres con presentación texto/emoji

Los tonos de piel Fitzpatrick se pueden aplicar a los caracteres Unicode que tienen presentación texto y presentación emoji. En el caso de la presentación texto, el tono de piel se muestra con una trama de puntos más o menos densa..

El primer ejemplo siguiente muestra un carácter con presentación predeterminada en modo texto y le aplica un modificador Fitzpatrick. El primer ejemplo siguiente muestra un carácter con presentación predeterminada en modo emoji y le aplica un modificador Fitzpatrick..

  • Firefox muestra la presentación en modo emoji cuando se añade un modificador Fitzpatrick sin añadir selectores de variación, aunque la presentación predeterminada sea el modo texto.
  • Google Chrome, además de no siempre mostrar el modo predeterminado cuando es texto, no muestra el modificador Fitzpatrick si se incluye el selector de variación VS16.
Incorrecto en Chrome Por determinar en Firefox
<p>
  &#x261d;: <span style="font-size: 300%">&#x261d;</span>
  &#x261d;&#x1f3ff;: <span style="font-size: 300%">&#x261d;&#x1f3ff;</span>
</p>
Enlace externo
Incorrecto en Chrome Por determinar en Firefox
<p>
  &#x261d;&#xfe0f;: <span style="font-size: 300%">&#x261d;&#xfe0f;</span>
  &#x261d;&#xfe0f;&#x1f3ff;: <span style="font-size: 300%">&#x261d;️&#x1f3ff;</span>
</p>
Enlace externo

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">
Enlace externo

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

Bug de Firefox relacionado:

Formularios

El atributo accesskey

El atributo accesskey establece la combinación de teclas que coloca el foco en un elemento de un formulario.

  • Firefox utiliza la combinación Alt+Shift+tecla
  • Google Chrome utilizan normalmente la combinación Alt+tecla, pero cuando esa combinación ya está asociada a alguna acción usa la combinación Alt+Shift+tecla

En el ejemplo siguiente Firefox utiliza la combinación Alt+Shift+tecla para situar el cursor en las cajas de texto, mientras que Google Chrome utiliza la combinación Alt+tecla:

<input type="text" name="texto1" value="Acceso con a" accesskey="a">
<input type="text" name="texto2" value="Acceso con i" accesskey="i">
<input type="text" name="texto3" value="Acceso con o" accesskey="o">
<input type="text" name="texto4" value="Acceso con u" accesskey="u">
Enlace externo

Chrome utiliza la combinación Alt+tecla, que tiene el inconveniente que entra en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo. Firefox utiliza la combinación Alt+Shift+tecla, más incómoda de utilizar, pero que no interfiere con las combinaciones ya definidas por el navegador o el sistema operativo.

En el ejemplo siguiente, Chrome no puede acceder a la caja de texto con la combinación Alt+d, ya que esta combinación traslada el foco a la barra de dirección, pero puede hacerlo con la combinación Alt+Shift+d:

<input type="text" name="texto1" value="Acceso con d" accesskey="d">
Enlace externo

En el ejemplo siguiente, Chrome no puede acceder a la caja de texto con la combinación Alt+e, ya que esta combinación abre el menú de herramientas, pero puede hacerlo con la combinación Alt+Shift+e:

<input type="text" name="texto2" value="Acceso con e" accesskey="e">
Enlace externo

En el caso de las teclas de acceso que no son las letras del alfabeto (los acentos no pueden ser teclas de acceso):

  • Firefox utiliza la combinación Alt+Shift+tecla
  • Chrome utiliza la combinación Alt+tecla
<input type="text" name="texto1" value="Acceso con 1" accesskey="1">
<input type="text" name="texto2" value="Acceso con 2" accesskey="2">
<input type="text" name="texto3" value="Acceso con 3" accesskey="3">
<input type="text" name="texto4" value="Acceso con 4" accesskey="4">
Enlace externo
<input type="text" name="texto1" value="Acceso con ," accesskey=",">
<input type="text" name="texto2" value="Acceso con -" accesskey=".">
<input type="text" name="texto3" value="Acceso con +" accesskey="+">
Enlace externo

Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en mayúsculas y minúsculas:

  • Google Chrome no avanza de uno a otro
  • Firefox avanza de uno a otro con la combinación Alt+Shift+tecla
<input type="text" name="texto1" value="Acceso con z" accesskey="z">
<input type="text" name="texto2" value="Acceso con z" accesskey="z">
<input type="text" name="texto3" value="Acceso con z" accesskey="z">
Enlace externo
<input type="text" name="texto1" value="Acceso con w" accesskey="w">
<input type="text" name="texto2" value="Acceso con W" accesskey="W">
<input type="text" name="texto3" value="Acceso con W" accesskey="W">
Enlace externo

Control de tipo número: <input type="number">

En el caso de los números decimales:

  • Chrome admite la coma (,) y el punto (.) como separadores de la parte decimal.
  • Firefox sólo admite la coma (,) como separador de la parte decimal.
Escriba un número:
<input type="number" name="numero">
Enlace externo

Control de tipo mes: <input type="month">

Google Chrome muestra un control específico para seleccionar el mes y el año, pero Firefox no lo hace.

Correcto en Chrome Incorrecto en Firefox
Mes: <input type="month" name="mes" size="20">
Enlace externo

Bug de Firefox relacionado:

Control de tipo semana: <input type="week">

Google Chrome muestra un control específico para seleccionar la semana y el año, pero Firefox no lo hace.

Correcto en Chrome Incorrecto en Firefox
Semana: <input type="week" name="semana" size="20">
Enlace externo

Bugs de Firefox relacionados:

Favicons

Favicons animados

Firefox admite favicons animados, pero Google Chrome no.

Incorrecto en Chrome Correcto en Firefox
Enlace externo

Nota: El bug 19731 de Chrome, que trata este tema, se abrió en agosto de 2009 y se cerró el mismo día indicando que no se pensaba implementar debido a su dificultad y poco interés.

MathML

Firefox es capaz de mostrar elementos MathML, pero Chrome no.

CSS

Hojas de estilo alternativas

Firefox permite elegir hojas de estilo alternativas, pero Chrome no.

Pseudo-clases y pseudo-elementos

El pseudo-elemento ::first-line

Aunque en el ejemplo siguiente, Google Chrome muestra la primera línea en mayúsculas, pero no correctamente. Parte del texto se pierde por el lado derecho. Parece como si Chrome calculara las palabras que se muestran en la primera línea de texto teniendo en cuenta el tamaño en minúsculas y al aplicar posteriormente el cambio a mayúsculas, el tamaño es mayor y el texto se extiende por la derecha, fuera de la vista.

Incorrecto en Chrome Correcto en Firefox
p::first-line {
  text-transform: uppercase;
}
Enlace externo

El pseudo-elemento ::first-letter

Si la imagen situada al principio del elemento es una imagen flotante, Firefox no modifica el aspecto de la primera letra de texto, aunque Chrome sí lo hace.

Incorrecto en Chrome Correcto en Firefox
p::first-letter {
  color: red;
}

img {
  float: right;
}
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p::first-letter {
  color: red;
}

img {
  float: left;
}
Enlace externo

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

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;
}
Enlace externo

El ejemplo anterior da el siguiente resultado en Firefox 62:

Ejemplo de fuente oblique e italic

Propiedad font-size-adjust

La propiedad font-size-adjust funciona parcialmente en Firefox, pero no en Google Chrome.

Correcto en Chrome Correcto en Firefox
p {
  font-size: 20px;
}
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  font-size: 20px;
  font-size-adjust: 1.5;
}
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox
p {
  font-size: 20px;
  font-size-adjust: 0.5;
}
Enlace externo

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>
Enlace externo

Líneas horizontales

Propiedad color

En Firefox la propiedad color establece el color del borde de la línea, pero en Chrome no lo hace.

Incorrecto en Chrome Correcto en Firefox
hr {
  color: red;
}
Enlace externo
Incorrecto en Chrome Correcto en Firefox
hr {
  height: 1px;
  color: red;
}
Enlace externo
Incorrecto en Chrome Correcto en Firefox
hr {
  height: 10px;
  color: red;
}
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%;
}
Enlace externo
p.capital::first-letter {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
Enlace externo

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

Interfaz de usuario

Contorno outline de un elemento en-línea

El contorno de un elemento en-línea no se muestra de la misma manera en Google Chrome que en Firefox.

Por determinar en Chrome Por determinar en Firefox
span.con-outline {
  outline: black 3px solid;
}
Enlace externo

La propiedad compuesta columns

Si se escriben dos valores en la propiedad compuesta columns, si el elemento tiene un tamaño predefinido, Firefox hace caso únicamente al número de columnas, pero si el elemento no tiene un tamaño predefinido (tablas, elementos flotantes, etc.), hace caso de los dos valores. Chrome no lo hace.

Incorrecto en Chrome Correcto en Firefox
p {
  columns: 2 8em;
  float: left;
  text-align: justify;
}
Enlace externo