soy Kseso y esto EsCSS

El bug de Chrome con html {font-size: 62.5%} En el pecado llevas la penitencia

El porqué y soluciones del bug de Google Chrome al declarar un tamaño para font-size en el html en % y en el body en rem o em

El bug de Chrome con html {font-size: 62.5%} En el pecado llevas la penitencia

·Por Kseso ✎ 8

Desde hace un tiempo vienen sucediéndose las "quejas" o avisos de un bug del navegador de Google Chrome relativo a la propiedad font-size cuando se usan porcentajes en el html y rem en el body.

Es una práctica bastante extendida desde la llegada y uso de las unidades EM y REM el pretender controlarlas al píxel y por lo tanto prostituir su misma naturaleza y el componente de accesibilidad que le es innato.

Para ello se recurre a hacer trampas para que el valor inicial de ambas no sea el que el usuario del navegador tenga definido en sus preferencias/ajustes si no otro conocido de antemano por el desarrollador. Para un explicación más detallada tanto de ambas unidades como de la mala práctica lee el artículo De Ems y Rems.

Preparando el bug

El bug de Chrome se produce al declarar en el html el tamaño de la fuente en % (normalmente 62.5%) para buscar que sean 10px ya que la mayoría de navegadores fijan el valor de font-size en 16px en sus ajustes de configuración (62.5% de 16 = 10). A partir de ese momento el mal desarrollador ya cree controlar el valor final o equivalente del Rem y del tamaño de los textos.

Si quiere que los párrafos sean de 16px sólo tiene que declararles 1.6rem. Si dice que el h1 sea de 3rem sabe que eso son 30px para la mayoría de usuarios.

Esta práctica traducida al código que provoca el bug es algo como lo siguiente:

html { font-size: 62.5%; } body { font-size: 1.6rem; }

El efecto del bug

El bug de Chrome con html {font-size: 62.5%}
El bug de Chrome con html {font-size: 62.5%}

Tras el código anterior la expectativa es que el texto sea renderizado en un tamaño de 16px. Sin embargo Chrome hace caso omiso del 62.5% y lo muestra mucho mayor.

En concreto multiplica por 1.6 el valor indicado en los ajustes del navegador: 16 * 1.6 = 25.6px. Ignora olímpicamente la reducción del tamaño indicada en el html. No hace el cálculo del 62.5% de 16.

El porqué del bug

Según indican en uno de los reportes de este bug de Chrome parece ser que si se declara en el html un tamaño menor del 100% en el tamaño de la fuente es ignorado. Cosa que no ocurre si es mayor a 100%.

Y según el testimonio de algún usuario, también se produce declarando en px en ek html un tamaño inferior al valor indicado en los ajustes.

Este comportamiento afecta a las versiones estables 31.0.1650.57, dev 33.0.1707.0 y beta 32.0.1700.14 y posteriores, sin importar el SO.

Soluciones al bug de Chrome con font-size

La lógica, más efectiva, respetuosa con el usuario y sus preferencias/necesidades pasa por hacer las cosas bien y no pervertir la razón de ser del Rem y EM.

No alteres el valor del tamaño del texto que el usuario haya elegido. Construye tu css en base a él sin pretender saber al píxel el tamaño computado del rem y em.

Pero si ya tienes el problema encima y ahora Chrome te ha estropeado el control férreo que pretendías aquí indican un patch

Y si quieres otra forma de arreglarlo, TechAbly sugieren la vía de un hack javascript

<script type="text/javascript"> document.getElementsByTagName('html')[0].style.fontSize = '62.5%'; document.body.style.fontSize = '1.6rem'; </script>

Un ruego

Sinceramente, y esto no debería extrañarte después de lo que he dicho antes, por mi ¡ojalá! no sólo no lo arreglaran los desarrolladores de Chrome, no. Deberían implementarlo todos los navegadores. Ignorar la declaración font-size en el selector html si el valor fuese menor al fijado por el usuario en la configuración de su navegador.

¡Ala! Yo lo he dicho. Ahora me puedes "atizar" por mi deseo.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso