Tip: Jan Bien: kódování www stránek (HTML, XHTML, CSS)

Gecko 1px bug

Mozilla/Firefox (Gecko) a svislé menu s těsně svisle přiléhajícími položkami. Tušíte, o jakou implementační chybu se jedná? Mezi některými položkami vznikají vertikální 1px mezery, v nichž prosvítá pozadí rodičovského boxu. Nebo se u některých položek nezobrazí dolní rámeček. Tuto obzvlášť nepříjemnou chybu dnes umíme ošetřit jen zčásti.

Ukázky

  1. Chybějící dolní rámeček:

      body {
        font: 80%/1.5 Arial, sans-serif;
        }
      p {
        margin: 0;
        padding: 5px 10px;
        border-bottom: 1px solid gray;
        background: silver;
        }

  2. Nadbytečný okraj mezi boxy:

      body {
        font: 80%/1.4 Arial, sans-serif;
        }
      p {
        margin: 0;
        padding: 5px 10px;
        border-bottom: 1px solid gray;
        background: silver;
        }

  3. Bezproblémové řešení, pokud je v prohlížeči nastavená základní velikost písma:

      body {
        font: 81.25%/1.46153846 Arial, sans-serif;
        }
      p {
        margin: 0;
        padding: 5px 10px;
        border-bottom: 1px solid gray;
        background: silver;
        }

Postižený prohlížeč

Gecko/20050511 (Firefox 1.0.4), a celá řada starších verzí.

Projevy

Chyba se projevuje u normálně řazených i plovoucích boxů následujícím způsobem:

  1. Pokud boxy „těstně sousedí“ ve vertikálním směru, pak může být výše postavený box překryt o 1px „těstně svisle sousedícím“ boxem. Díky tomu mohou některé boxy působit o 1px nižší. Velmi nepříjemně se chyba projeví, jestliže má první box nastavený dolní rámeček (border-bottom), jelikož tento rámeček může být o 1px zmenšen. Pokud je rozměr dolního rámečku právě 1px, pak může být zcela zneviditelněn.
  2. Svislá vzdálenost, sloučené okraje dvou následně řazených boxů, se mohou o 1px lišit. Pokud boxy sousedí ve vertikálním směru bez jakéhokoli okraje, pak zde může vzniknou okraj 1px. Tímto okrajem pak prosvítá pozadí nadřazeného boxu.

Řešení, eliminace

Základní velikost písma ve většině prohlížečích (včetně Gecko) je 16px. Pokud hodnoty CSS vlastností zadávané v jednotkách odvislých od velikosti písma (em, ex, line-height jakožto násobek velikosti písma, font-size v procentech) zadáte co nejpřesnějším způsobem (na několik desetinných míst) tak, aby z nich při základní velikosti písma 16px vycházelo číslo co nejbližší číslu celému (ideálně číslo celé), pak k chybě ve zobrazení nedojde. To se ovšem týká jen základní velikosti písma – pokud si uživatel zvětší/zmenší písmo, pak se chyba opět může projevovat.

Předchozí odstavec asi zní příliš akademicky, uvedu raději praktický postup:

  1. Na celé stránce potřebujete velikost fontu 13px. Jelikož základní velikost písma je 16px, pak vypočítáme 13 / 16 * 100 = 81.25%
    … body {font-size:81.25%}.
  2. Na celé stránce potřebujete velikost řádkování 19px. Hodnota line-height se vypočítává z velikosti písma, kterou jsme nastavili na 13px. Velikost řádkování tedy vypočítáme jako podíl řádkování a velikosti fontu. 19 / 13 = 1.46153846
    … body {line-height:1.46153846}.
  3. Na nějaké části stránky, právě například v menu, potřebujeme o stupeň zmenšit velikost písma. Tedy z 13px potřebujeme „slézt“ na pixelů 12. Tedy 12 / 13 * 100 = 92.3076923%
    … #menu {font-size:92.3076923%}.
  4. Zároveň bychom měli změnit řádkování, jelikož 1.46153846 * 12 = 17.5px a se zaokrouhlováním této hodnoty by mohlo mít Gecko problémy. Proto vypočítáme novou hodnotu řádkování: 18 / 12 = 1.5
    … #menu {line-height:1.5}.
  5. Pokud bychom pak chtěli v menu použít další jednotku odvozenou od velikosti písma, měli bychom dbát na výsledné celé číslo. #menu {padding:0.5em} je v pořádku, z 12px vychází 6px.

Chyba tedy zřejmě souvisí se zaokrouhlováním a dopočítáváním hodnot v relativních jednotkách na pixely. Pokud na každé úrovni kaskády vychází v konečných pixelech celé číslo (nebo alespoň co nejbližší číslo celému), chyba je při základní velikosti písma eliminována. Výše zmíněný postup ale berte spíše jen jako vysvětlující, ve vyšších verzích bude jistě chyba opravena.

Související:

Komentáře

1. Acci – 4. července 2005, 12:08

V Deer Park Alpha 1 je to již opravené, takže se dá očekávat, že Firefox 1.1 se bude chovat správně.

2. Pavel Kout – 4. července 2005, 12:32

Nechápu, Honzo, že to za tak dlouhatánskou dobu pořád nedokázali opravit? Ale chová se to vážně nevypočitatelně – občas pomůže aplikovat border-bottom místo border-top (a naopak), ale je to děsná alchymie. Došel jsem ke stanovisku, že to prostě ignoruju a čekám, až to opraví – to mi připadá jako nejrozumnější řešení.

3. Pachollini – 4. července 2005, 13:07

Stejná chyba vzniká i při uvádění rozměrů v em použiji-li např. div { background:silver; padding:0.2em; } mezi některými divy budou mezery. V zaokrouhlování a přepočtu na px je to IMHO určitě a opravit se to dá podobně: zadat padding tak, aby vycházel dobře při přepočtu na px. Problém je, že to někdy nevyjde úplně přesně, takže se dá jenom zmenšit frekvence chyby (buď tam 1px chybí, nebo přebývá). Při změně velikosti písma to nefunguje rovněž. Chyba se také může projevit při použití poloprůhledného PNG na pozadí: obrázky se překryjí a vznikne 1px tmavší proužek.

4. Petr Weida – 4. července 2005, 13:56

Velice ti děkuji! Asi týden zpět jsem se asi hodinu trápil s Firefoxem a nechápal, co tam ta 1px linka dělá. Zkoušel jsem všechno možné, ale nic nepomáhalo.

Teď jsem změnil font-size a ono to FUNGUJE! Už jsem to tak chtěl nechat. ;-)

5. Radim smička – 4. července 2005, 15:07

Já jsem si s podobnou chybou hrál půl dne a pak jsem to vzdal. Jde o line height, kde se také stává, že na konci boxu chybí 1px, nebo také přebívá. Problém se řeší obdobně, tedy hraje se s různou výškou, ale je to odrb a co funguje na jedné stránce na druhé samozřejmě už ne. Těším se až to opraví.

6. Jiří Bureš – 4. července 2005, 15:56

Mám jednu otázku. Co přesně znamená věta: Pokud hodnoty vlastností zadávané v jednotkách odvislých od velikosti písma (em, ex, line-height jakožto násobek velikosti písma, font-size v procentech) zadáte co nejpřesnějším způsobem (na několik desetinných míst), pak k chybě ve zobrazení nedojde. Jak se určí onen „co nejpřesnější způsob“?

7. Jan Bien – 4. července 2005, 16:05

Ad Jiří Bureš: Jéjej, to nedává moc smysl, co? Omlouvám se, něco mi vypadlo, takže věta má zní takto:

Pokud hodnoty vlastností zadávané v jednotkách odvislých od velikosti písma (em, ex, line-height jakožto násobek velikosti písma, font-size v procentech) zadáte co nejpřesnějším způsobem (na několik desetinných míst) tak, aby z nich při základu 16px vycházelo číslo co nejbližší číslu celému (ideálně číslo celé), pak k chybě ve zobrazení nedojde.

Díky za upozornění. Ještě jsem raději pro názornost doplnil praktický postup, jak zadávat velikosti písma a řádkování.:-)

8. pixy – 4. července 2005, 16:44

Přesně jako Pavel Kout [2] – jednak nechápu, proč tak známou chybu za tu dobu nedokázal tým Mozilly opravit, jednak to ignoruju a čekám na opravu. Psát do CSS zrůdnosti typu font-size: 0.897134765795347985333em opravdu nebudu. :-)

Ale i tak díky za to, Jane.

9. Alv – 4. července 2005, 23:09

Ty jo, je to nejak zavisly na OS? Me se to ve Firefoxu 1.0 + Linux vubec neprojevuje, vidim linky i v ukazkach.

10. Karel Klíma – 5. července 2005, 01:45

Něco podobného jsem řešil, když jsem dělal vertikální menu pomocí tagů <ul>. Když jsem dal odkazu v tagu <li> padding v emech, tak se projevovala tato chyba. Stačilo ale uvést padding v pixelech a vše bylo v pohodě. Z toho usuzuji, že bug ve Firefoxu se týká právě velikostí udávaných v emech, v pixelech jde vše v pohodě.

11. Pin007 – 5. července 2005, 14:33

[9] potvrzuji, linux verze Gecka je odolna :-)
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4.

12. dgx – 5. července 2005, 19:38

[2][8] vůbec si nedělejte o vývojovém týmu Gecka iluze. Docela nepříjemná chyba, kterou jsem reportoval před více než rokem (viz Bugzilla Bug 235555), se dočkala velmi rychlého posouzení, ale nikoliv vyřešení. Zkuste si ve Firefoxu třeba tento příklad: Testcase #2 for bug 235555.

13. Petr Tomeš – 7. července 2005, 08:29

[12] Nejnovější verze Gecka (Firefox) a Presta (Opera) ten testcase zobrazují naprosto shodně. V IE 6.0 SP1 to je zarovnané také tak, jen se nezobrazují barevné výplně prvků. Buď je chyba v několika na sobě nezávislých jádrech (jiná - např. KHTML - jsem nezkoušel) nebo je to dobře. Podrobně jsem se na to ale nedíval.

  • Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b2) Gecko/20050706 Firefox/1.0+
  • Opera, Version 8.02, Build 7668, Platform Win32, System Windows 2000
  • IE 6.0.2800.1106
14. dgx – 8. července 2005, 20:54

[13] Přečti si ten titulek Move the mouse in and out of the green areas.

Váš komentář

K článku nelze připojit komentář, Mraveniště bylo zakonzerováno.

Copyright © Jan Bien.
W3C XHTML 1.0  | W3C CSS 2  | UAW adaptive  | Geo URL  | RDF RSS