Blog om foto, web og brugervenlighed

Ghost bug. Gentaget tekst i IE

oktober 27th, 2010. Kategori: Browser bugs and fixes

Er flere gange i forbindelse med vedligeholdelse og udvikling af Statsbibliotekets søgesider løbet ind i problemer med at slutningen af en tekst helt umotiveret  er blevet gentaget i Internet Explorer.

Første gang blev buggen løst af en kollega, som siden glemte, hvad hans løsning var. Så da buggen dukkede op igen, måtte vi starte forfra. Forrige gang fik jeg aldrig ram på buggen, og da tekstgentagelserne kun optrådte i IE6 under helt bestemte forhold blev problemet  tilsidesat.

I dag dukkede buggen så op igen, i forbindelse med flytningen af et tekst element. Denne gang i IE7 hvor de sidste 3 characters i en bestemt streng blev gentaget uden for flowet og samtidig forstyrrede det øvrige flow på siden. Den gentagne tekst var kun synlig i visse situationer (helt konkret når man for søgte at se sin kurv, uden at der var andet indhold mellem kurven og sidens footer), men til gengæld fuldstændig konsistent i disse tilfælde.

En hurtig søgning afslørede at buggen kaldes ghost bug på engelsk. Der var dog mindre enighed, om hvordan ghost buggen fikses.  Her er et par af de nævnte forslag:

• Tjek at siden har en korrekt doctype declaration
• Forsøg at fjerne floats
• Undgå floats og width på 100% sammen
• Eksperimentér med fast højde på elementet og owerflow hidden

Ingen af disse forslag løste dog vores ghost bug.

Fix af ghost buggen

Mange af IE bugs skyldes eller fremprovokeres af brug af floats, så den løsning lå jo lige for. Desværre hjalp det ikke at fjerne floats på hverken elementet eller parent elementer, der også havde floats. Næste forsøg gik så på at se på både floats og widts i forældre elementerne. Og her dukkede løsningen op. Et div element 2 niveauer oppe havde en float left kombineret med en width på 100%. Ved at nedsætte width på dette element til 99.8% fik jeg has på ghost buggen.

Det kan synes ulogisk at vi først floater elementer for bagefter at give dem en width på 100%. Det skyldes, at hvis du har mange floatede div elementer inden i hinanden, og f.eks. kun den inderste div indeholder tekst. Så vil den yderste div ikke have samme højde som det indhold der vises på skærmen. Populært sagt så kollapser div-tagget. Dette giver problemer med f.eks. margin-top/padding-top på de efterfølgende elementer selv om man har clearet den ovenstående blok. Men det var et sidespring.

Fix af div tags der kollapser

Mødte endnu en ghostbug og fandt derfor et par nye metoder til at undgå at div’er der indeholder floatede div’er kollapser, hvis ikke parent div-tagget ikke også er floatet.

Man kan f.eks. give det kollapsede parent div-tag en overflow: auto eller hidden. Eller man kan give det en display:table.

Artikel om hvordan undgå div-tags der kollapser.