Curioso comportamiento de IE con overflow:hidden y position:relative

Hace unos días tuve un curioso problema en un proyecto en el curro. La cuestión es que una capa con overflow:hidden y height y witdh fijos no “enmascaraba” el contenido interior. Era curioso ya que (como muchas veces) esto sólo ocurría en IE (6 y 7).

La situación es muy simple, más de una vez habréis hecho un scroll, por ejemplo una galería de fotos donde todos los thumbnails están en una “tira horizontal de ancho variable” (vamos un capa con alto fijo) y a la que le ponemos position: relative. Esta tira está dentro de una capa con alto y ancho fijos y overflow: hidden. A partir de ahí (en mi ‘mootolero caso’) ponermos un Fx.Scroll y asociamos a un par de elementos un evento para hacer scrollTo y desplazar la tira de thumbs.

Muy bien, estupendo. Lo que me ocurrió es que en este caso el Scroll iba a ser vertical. La capa exterior (que yo llamo máscara y normalmente llaman wrapper) tiene las mismas propiedades CSS (height/width fijos + overflow:hidden) y la interior simplemente tiene un ancho fijo (realmente ni siquiera esto sería necesario) y tenía un position:relative para el (al menos yo así lo creia) funcionamiento correcto del scroll.

El resultado lo podeis ver en el playground(por cierto no he puesto los scrolls para que se aprecie que es una cuestion CSS pura y dura). Vereis que en FF todo funciona correctamente pero en IE el overflow:hidden parece ser ignorado y la altura es estirada. Podeis pinchar en el link “solucionar problema” y vereis que en FF no tiene efecto alguno pero en IE la wapa wrapper1 se comportará como esperabamos. Este link simplemente elimina la clase “relative” de la capa, dicha clase es la que añade el position:relative a “inner1″. El css y js del playground está en /css/playground.css y /js/playground.js, respectivamente.

¿Esto es un bug de IE? Googleé un poco y con prisa y no encontré información al respecto, pero al menos lo parece. Espero que os sirva de ayuda.