Scrollbar tapa contenido en IE


Recientemente estaba trabajando en un nuevo sitio web y uno de los requerimientos del usuario era que el sitio debía de contar con unos elementos para conectarse con Linked in y Twitter, los cuales deberían estar visibles todo el tiempo.

Como la mayoría de mis proyectos, el sitio web tenía que contener responsive web design y cross browser navigation, dando soporte a IE9, 10 y 11.
No fue hasta que alguien de QA encontró que esos elementos mostraban un comportamiento distinto en las diferentes versiones de Internet Explorer:

  • IE 9 – el scrollbar siempre está visible y delimita el ancho de la pantalla.
  • IE10 y 11 – el scrollbar está como automático; aparece y desaparece dependiendo de si el puntero está dentro o fuera del body.

El comportamiento que tiene el scrollbar en IE10 y 11 es que el scrollbar forma parte del body, por lo que éste no delimita el tamaño de la pantalla, y en este caso se superpone sobre los elementos.

El problema residía en que el scrollbar tapaba los elementos y no se podía hacer click en los mismos para poder abrir las paginas de Twitter y Facebook del cliente.

La primer solución que se me ocurrió fue generar una hoja de estilos para IE, en la cual despegara esos elementos del extremos derecho de la ventana, pero para eso tendría que agregar una condición en el head y lo que menos se buscaba era agregar elementos innecesarios al markup.

Seguí buscando alguna solución al problema y me encontré con el siguiente enlace donde se habla un poco del comportamiento del scrollbar en IE.
Al final lo único que hice fue lo siguiente:

    html{ 
        -ms-overflow-style: scrollbar;
    }

Lo que se se consigue con esa línea de código es que el scrollbar siempre se encuentre visible, y que no forme parte del contenido, por lo que ya no se superpone sobre los elementos.

Anuncios
Esta entrada fue publicada el 20 septiembre, 2015 a las 19:14. Se guardó como Tech y etiquetado como , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: