in desarrollo web, estándares

Strange bugs are happening

Aviso a navegantes: este es un post über-técnico, aunque no por ello falto del cariño y habituales chascarrillos que harán de su lectura una experiencia relajante y encantadora. Para quien no se vea capaz, o para quien empiece y vuelva a este párrafo para reengancharse con esta linea, aquí tenéis otra historia que escribí excclusivamente para vosotros.

Entrando en materia: Si entras con IE 6 en http://www.chicadelatele.com… ¡crash! ¡biff! ¡bang! ¡bum! Tu navegador desaparece. Nos han escrito esta mañana -es uno de los blogs de La Coctelera, aunque con dominio propio- para contarnos que sucedía este problema.

chica-bug.png Entre los ratos que me dejaba el lanzamiento de un portal por aquí, el mantener un servidor a flote que ha recibido una avalancha de 10.000 mails en 10 minutos por allá y otras labores de este esquizofrénico web servidor de ustedes -que no servidor web-, me he pasado gran parte del día tratando de cazar esa mariposa (por cierto que tengo un borrador al respecto de esto de la esquizofrania web, vieniendo pronto).

Tengo estas extrañas aficiones: capturar un bug comienza siendo algo desagradable que acompaño con un picante aderezo de blasfemias. Pero una vez entro en calor, se convierte en un placer con el que disfrutar que culmina con la explosión de una cápsula de felicidad. Si la capturas.

La cápsula ha terminado por estallar, parcialmente: he dado con una solución para el problema, aunque no están del todo claras las causas del bug, o es un bug con demasiadas variantes como para dar una respuesta simple y contundente. El problema se produce por una esotérica combinación de CSS, HTML y la presencia de un tag < style > dentro del < body > (me ha costado horas llegar hasta aquí, no se vayan a pensar). No he encontrado nada parecido documentado, y no me extraña. Aunque si he tenido el placer de conocer otros bugs del IE igual de absurdos o más.

El tag style aparece dentro del body para que el badge de Flickr incorpore sus estilos, así que no es plan el obligar al usuario a prescindir de él.

Tecnicamente un tag < style > debe estar dentro del < head >, o sea que no puede estar en el < body >, aunque esto no debería mandarte a hacer puñetas como hace el IE. Así que hay que tirar del hilo.

Si quitas el tag style, todo funciona. Si quitas el CSS, todo funciona. Pero su combinación es fatal. La solución de meter los estilos enlazando una hoja de estilo con un link hacía desaparecer el bug, aunque eso hubiese sido demasiado fácil. Tenía que saber quien causaba el problema. Así que el proceso consistía en ir quitando y poniendo elementos de la CSS hasta localizar al responsable. Llegado un momento pensé que era una locura tratar de averiguarlo, ya que el bug es tan poco obvio que probablemente se debía a una compleja combinación de elementos.

Pero le encontré.

Se trata de un float: right aplicado a un div anidado dentro de otro par de divs (que tampoco tienen gran complejidad en cuanto a su posicionamiento). Quitando este float: right el navegador no se cuelga.

He tratado de reproducir el problema con un HTML más limpio para dejarlo publicado y documentado, aunque no lo he conseguido. Todavía. Algún otro elemento del HTML participa en la combinación, y tengo que dar con él. Mañana espero poder reproducir el bug en un esquema más simple, aunque más para mi gloria personal que para el uso y disfrute del respetable, porque la combinación que produce el error es tan específica que pasarán al menos 100 lunas (que no 100 lunes) hasta que otro primo como yo pierda un día entero con este bug.

Ah, se me olvidaba. Mañana tengo que terminar el CSS alternativo al float: right para dejar el blog funcionando de forma correcta. Pero eso es lo de menos…