Zajímavý bug

23.9.2006 13:40 | Přečteno: 5372× | Ze života | | poslední úprava: 23.9.2006 15:54

Že jsou webové prohlížeče, podobně jako všechny ostatní programy, plné nejrůznějších chyb, je věc zcela normální. Existuje ovšem jedna chyba ve zpracování CSS, kterou obsahují dlouho obsahovaly všechny nejrozšířenější prohlížeče kromě Opery.

Je známou realitou, že webové prohlížeče nezobrazují obsah tak, jak by si člověk přál. Dokonce ani tak, jak předepisují standardy a doporučení. Většinou je to ovšem systematická záležitost, takže se dá relativně snadno řešit. Navíc je daná chyba typická pro jeden konkrétní browser, jen výjimečně jich postihuje víc. Existuje však jedna poměrně stupidní chyba, se kterou se setkáme u celé řady prohlížečů. A co hůř, ona se projevuje jen někdy.

Představme si následující HTML soubor (DOCTYPE nyní vynechávám, ale dělá to se všemi, od HTML 4.01 Transitional až po XHTML 1.1):

<html>
<head>
<link href="style.css" rel="StyleSheet" type="text/css">
</head>
<body>
<div>
...
</div>
<p id="nefunguje">nefunguje</p>
</body>
</html>

Místo tří teček může být v podstatě cokoliv, například strukturovaný text, nejlépe s obrázky. Dokument vypadá vcelku normálně, a také normální je. Šťávu dostane až s přidáním CSS souboru (style.css):

#nefunguje {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

Co na tom je, že? Jenže chyba lávky. Když si tento dokument, ať už bude onen "třítečkový" obsah jakýkoli, zobrazíte v Opeře (verze 8 nebo 9, za starší neručím), bude to vypadat přesně podle očekávání. Nápis "nefunguje" bude v levém dolním rohu, 20 pixelů zleva a zespoda od hranice obsahujícího bloku, tedy elementu body. Zde žádné překvapení, všechno funguje, jak má.

Mnohem zábavnější to ale bude, když použijete nějaký jiný prohlížeč. Týká se to MSIE všech verzí, Mozilly a Firefoxu (zřejmě všech verzí starších verzí; ty nejnovější jsou již opraveny) a Konqueroru (dtto). Výsledek bude nedeterministický. Někdy se to vykreslí správně, jindy zůstane nápis "nefunguje" trčet sice vlevo, ale někde mezi dolním koncem obrazovky a koncem stránky.

Následné chování se bude navíc lišit. Když se u MSIE na text najede kurzorem, skočí na správnou pozici, kdežto u zbývajících browserů tam zůstane trčet. Pravděpodobnost chybného chování je závislá na délce vloženého textu - čím delší, tím pravděpodobněji chyba nastane. Pokud jsou v textu obrázky, je výskyt chyby mnohem častější (s holým textem k tomu dojde opravdu jen zřídka). Vypadá to, že se pro umístění elementu použijí rozměry obsahujícího bloku, zjištěné v nějakém okamžiku - tyto rozměry se později změní, pozice už se ale neaktualizuje (resp. u MSIE se aktualizuje při najetí kurzorem).

Otázka je, co s tím. Řešení lze rozdělit do tří skupin:

1. Systémové řešení. Samozřejmě spočívá v ohlášení chyby. I když o tomto bugu vím už dlouho, musím sebekriticky přiznat, že jsem to dosud nikde neohlásil. Sice v případě MSIE o nějaké reakci silně pochybuji, ale u Gecka a KHTML bych mohl docílit opravy chyby. Už jsem se rozhodl, chybu rozhodně nahlásím. I když se to podle bugzill moc nezdá, chyby byly nedávno opraveny. Systémovým řešením je tedy aktualizace na nové verze (a na Windows se vyhnout použití MSIE, minimálně do doby opravy chyby).
2. Workaround. Prostě uvedenou věc nepoužívat, i když je to někdy komplikace. Nenapadá mě cesta, jak by šlo chybě zabránit. Možná by šel použít JavaScript + DOM, ale bylo by to nečisté, složité (pokud by se to mělo používat rutinně) a nefungovalo by to s vypnutým JavaScriptem.
3. Používání fungujících browserů. Tento trochu komický nápad spočívá v tom, přesvědčit lidi, aby používali jen prohlížeče, které chybu neobsahují. Ale to je samozřejmě ještě o několik řádů méně pravděpodobné, že se podaří dosáhnout opravy chyby i u prohlížeče z Redmondu.

Takže jen čistě pro informaci - tato chyba tam prostě je, musí se s ní počítat, a já ji jdu ohlásit používat verze, ve kterých již chyba není. Vymalováno.

---

UPDATE: Pro Gecko to bylo hlášeno již v roce 2003 (bug 196937). Řešení dosud žádné. Jsem tedy velice skeptický.

UPDATE: Také pro KHTML to bylo ohlášeno, a to již v roce 2002. Něco se na tom řešilo, ale zůstává to tam stále. Zkusím provést nějaké experimenty a přihodit jim to tam.

UPDATE: Podle čerstvých zjištění byla chyba opravena jak v KHTML, tak v Gecku. Doporučuji tedy aktualizaci na nejnovější verze.

       

Komentáře

[Michal Kubeček]

Už nějakou dobu se HTML/CSS tak moc nezabývám, ale stejně si nejsem moc jistý, že máte pravdu. Četl jste specifikaci opravdu důkladně a jste si opravdu úplně jistý, že containing box toho odstavce je v tomto případě viewport a ne element body, který může být menší? Já bych si tipnul spíš druhou variantu (což by znamenalo, že špatně to má naopak Opera), ale raději se ještě podívám.

[Luk]

Tak znovu. Containing box je právě element body, a podle něj by se to mělo vykreslit. Což se děje v Opeře, ne však v jiných prohlížečích. A děje se to jen někdy, pravděpodobně tehdy, když se daný element umísťuje dřív, než skončil rendering obsahu nad ním.

[Michal Kubeček]

To právě není tak jisté. Ve specifikaci CSS Level 2 se totiž říká

The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).

přičemž termín positioned element je definován (9.3.2) takto:

An element is said to be positioned if its 'position' property has a value other than 'static'.

Interpretace vašeho HTML+CSS tedy závisí na tom, zda je element body v tomto případě positioned, tj. jaká je hodnota jeho atributu position. Protože jste ji nespecifikoval, necháváte to na defaultním stylu prohlížeče (ve specifikaci jsem nenašel, že by bylo určeno, jaká má být). Můžete si vyzkoušet, že pokud do stylu přidáte elementu body např. 'position: absolute', bude se odstavec pozicovat skutečně vůči němu (což při neuvedení height a obsahu skládajícím se ze tří teček bude pravděpodobně znamenat nápis nefunguje mimo obrazovku.

Můj závěr je tedy takový, že nejspíš je korektní chování jak Firefoxu, tak Opery a že rozdíl je dán jiným defaultním stylem. Pokud chcete, aby se to chovalo jedním ze zmíněných dvou způsobů, definujte hodnotu atributu position pro element body.

[Michal Kubeček]

Doplnění: první citace je ze sekce 9.8.4.

[Luk]

Jenže potíž je v tom, že i když celý obsah (včetně příslušného odstavce) vložím do bloku (třeba anonymního div), který má position: relative (čímž se stane obsahujícím blokem), chová se to naprosto stejně. Proto bych to na toto nesváděl.

[Michal Kubeček]

Mně ne, mně se to pozicuje vůči tomu elementu div (Firefox 2.0 beta 2).

[Luk]

Dal jsem si tu práci a vyzkoušel to nyní všechno znovu. A vypadá to celkem pozitivně - Firefox 1.5.0.6 (Gecko/20060808) již chybou netrpí, Konqueror 3.5.3 rovněž ne (což by bylo v souladu s tím, co jsem se dočetl u příslušného bugového hlášení; podle toho měla být chyba ve verzi 3.5 již opravena - i když tam někdo tvrdil, že nikoli).

V Mozille 1.7.13 (Gecko/20050915) je chyba přítomna, kdežto v Seamonkey 1.0.5 (Gecko/20060910) již nikoli. MSIE 6 samozřejmě neřeším (i když už jsem to reportoval Microsoftu), verze 7 ještě není finální (a nezkoušel jsem ji), takže ji nemá příliš smysl hodnotit.

Příslušné informace v zápisu opravím a namísto hlášení chyby musím všechny uživatele starších verzí vyzvat k aktualizaci. Když pro nic jiného, tak kvůli opravě této chyby.

[Michal Kubeček]

Totéž pro Konqueror 3.5.1.

[Zdenek.Z]

Hmm, divné, mě to funguje stejně všude stejně, tak jak bych očekával. Zkoušel jsem to na Opeře 9.01, Firefoxu 1.5.0.7, Konqueroru 3.5.4-0.5, Internet Exploreru 6.0 (pod wine). Všechno samozřejmě pod Linuxem.

[Luk]

Říkám, že se to děje jen někdy. Když jsou tam obrázky, je to mnohem častější, ale stejně to nenastane zdaleka vždy.

[Michal Kubeček]

Lidi, nechcete už se s tím Google-bombardováním jít vycpat? To tady za chvíli bude mít polovina lidí desetiřádkové patičky s hanlivými odkazy na všechno, co se jim nelíbí?

[pasmen]

Souhlas. To s tim Chuckem Norrisem je ale dobry

[Max]

Klid ...
Zdar Max

[Daniel Kvasnička ml.]

Nikdy by me nenapadlo delat to pres P...dal bych to do DIVu, to by snad fungovat melo, ne?

[Michal Kubeček]

To by mělo být jedno.

[Luk]

Jistěže je to jedno.