Firefox bug y las imágenes: efectos del atributo alt en su caja computada

Comportamiento extraño (¿bug?) de Firefox con las imágenes no cargadas y el tamaño de la caja computada en función del atributo ALT y su valor.

Firefox bug y las imágenes: efectos del atributo alt en su caja computada

Por Kseso ✎ 5

Sí. El artículo de hoy va sobre Firefox y el efecto que tiene el atributo alt de las imágenes en la caja generada.

Creo que es un señor bug de Firefox estos efectos del atributo alt, además de ser de lo más curiosos y desconcertantes. Pues el tamaño de la caja generada por una imagen vacía (no cargada por el navegador) varía en función de que exista o no el atributo alt, de que se encuentre vacío o de que sea una cadena de texto.

Todo ello, como indico al inicio, en el navegador Firefox en su versión 33.1 corriendo en el SO Vista. En otros SOs y nose si se mantiene. En Chrome no he observado tales efectos. Firefox y las imágenes: efectos del atributo alt en su caja computada

Pongamos en situación: tengamos en el Html una imagen que no es cargada por el navegador (para ello lo que hago es indicar una ruta a una imagen inexistente): <img src='no.jpg' />. Observa que omito deliberadamente el atributo alt

A continuación definamos tamaños para dicha imagen y observemos qué ocurre con Firefox:

Nada raro. FIrefox genera una caja para la imagen con los valores indicados en el Css.

A continuación añadamos el atributo alt='' sin ningún valor en él. ¡Sorpresa!

Firefox ignora los tamaños (width & height declarados para la imagen. No importa que se añada el modificador !important. Tampoco surte efecto el añadir los valores en el atributo style en línea. Ni que el tamaño sea declarado en los atributos width & height en la propia imagen.

La siguiente prueba consiste en añadir una cadena de texto al valor del atributo alt.

El tamaño de la caja generada por Firefox para la imagen no cargada es la necesaria para mostrar todo el contenido del texto alternativo. Sigue ignorando los valores declarados para su anchura y altura. Y como por defecto el elemento img es un elemento de línea, el fondo y bordes (si están declarados) se muestra como en los elementos textuales de línea.

Soluciones

Display: block o inline-block

Modificar para la imagen no cargada (vacía) el valor de la propiedad display tanto a block o inline-block algo se corrige. Pero...

Firefox ahora sí que la caja generada por la imagen vacía (anchura y altura) son las indicadas en el Css o los atributos correspondientes. Pero...
Si el valor del texto contenido en el atributo alt es lo suficientemente extenso respetará el margen lateral de la caja de la imagen pero la desbordará por abajo mostrando el sobrante.

Overflow: hidden

Para mostrar la caja de la imagen no cargada con el tamaño declarado y sin que el contenido del texto alternativo la desborde es necesario declarar overflow: hidden;.

Si el valor es scroll fuerza la aparición de las barras de desplazamiento (scroll) del todo funcionales.

Todos estos casos los puedes ver en vivo en el siguiente pen

See the Pen Firefox, empty images & `alt´ attr by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Recuerda que estos efectos (¿bug?) yo los he podido ver en Firefox ver. 33.1 corriendo en Vista. En Chrome no. Si tienes ocasión de ver el pen anterior en otros navegadores, versiones y SO agradezco saber qué ocurre. Gracias.

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 Don Kseso Kseso

Comentarios: 5

  1. Este problema venía de lejos. Lo comentamos por otro motivo en en demo de la comunidad anexa al blog.
    En realidad, Firefox usa para mostrar los 'alt' una caja 'inline', pero lo hace a través de su pseudoelemento 'before'. El problema es que los formatos de la imagen no se eliminan y se ve siempre como un agregado después del texto.

    Otra forma excéntrica de enfrentarnos a estos inventos es apuntar directamente al pseudo.

    [code]
    img {
    border: solid 2px green;
    width: 50px; height: 50px;
    }
    img::before {
    background-color: lime;
    display: inline-block;
    width: inherit; height: inherit;
    font: bold 12px monospace;
    overflow: hidden;
    resize: both;
    }
    [/code]

    Pero no es totalmente efectiva.

    ResponderEliminar
    Respuestas
    1. Creo recordar que aquella conversación versaba sobre mostrar o no el valor de content.

      Pero lo significativo de este artículo, Furoya, es el manejo que hace Firefox del tamaño de un elemento reemplazado.
      El tamaño en ellos debe ser los intrínsecos del objeto por el que el elemento es sustituido. Tamaño que puede ser alterado al declararle valores. Valores que prevalecen sobre los intrínsecos del objeto.

      Pero Firefox tiene ese comportamiento tan particular:
      Inicialmente dibuja la caja correctamente con los valores declarados.
      Acto seguido realiza un "repaint" de la caja en función del contenido en el texto alternativo. Repaint que lleva aparejado un "reflow" del documento.

      Una lástima que los desarrolladores de Firefox y el "mismo" Firefox no me hayan respondido a los tuits sobre el tema.

      Un saludo

      Eliminar
    2. Creo que lo primero que deberían aceptar es que si una imagen se mantiene 'inline' pero reconoce 'width' y 'height', entonces es 'inline-block' por omisión. Y en ese caso, al reemplazar esa imagen —cuando no se carga— por un elemento "de caja", debe mantener su valor de 'display'.
      En tu ejemplo demostrás que hay que forzarlo en la declaración, y eso lo deben corregir. No sé qué pasará ahora con los nuevos valores de 'display', pero alguna salida debe haber.

      En la práctica, declarar todas las imágenes con 'inline-block', seguramente aprovechando algún documento reset.css, tampoco es muy grave. De exquisitos que somos, yo propongo hacerlo sobre su '::before', ya que no afectaría a la imagen cargada pero sí al 'alt' visible cuando no se carga; que es justamente lo que queremos.

      Lo de las barras de desplazamiento ya trae más complicaciones, porque si la imagen es muy pequeña, las scrollbars no caben. De ahí lo de reemplazarlas con un nodo de redimensión. Otra forma algo vintage es usar el pseudoelemento como un tooltip, y que aparezca con posición absoluta sobre la imagen vacía (o con '-moz-force-broken-image-icon: 1') ... como se le criticaba al Internet Explorer desde hace años.

      Saludos para vos también, y no te amargues por la falta de respuestas de José Mozilla; es que no deben tenerla..

      Eliminar
  2. Con Aurora 34.0 ejecutándose en Ubuntu 14.04, obtengo los mismos resultados señalados en el artículo, a excepción de que no aparecen barras de scroll en la caja.

    ResponderEliminar
    Respuestas
    1. Gracias HenryGR por el dato.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap