dagblog.
← Archiv

Chyba zobrazení CSS vlastnosti background-image v IE


Chyba zobrazení CSS vlastnosti background-image v IE

Celý minulý týden jsem prováděl redesign jedné webové aplikace a narazil jsem na velice zvláštní
 chování Internet Exploreru. Vytvořil jsem tabulku, která byla orámována tenkou čárou tvořenou
 obrázkem nastaveným na pozadí krajních buněk. K tomuto účelu jsem využil vlastnost
 background-image

CSS třída s takto nastaveným pozadím vypadala takto

.line{
background-image:url("../img/line.png");
background-repeat:repeat-y;
}

Tato třída byla nastavena na pozadí oněch krajních buněk. Nyní se dostaneme k problému,
 nezřídka se stávalo, že zobrazená tabulka neměla vykreslené ono pozadí tvořené obrázkem.
 Představu lze získat náhledem 
 chybného zobrazení a 
 správného zobrazení.
 Tento velice nepříjemný visuální jev vznikal zcela náhodně. Nejdříve jsem pojal podezření na obrázek ve formátu
 png, tato domněnka se ukázala jako lichá. Postupným zkoumáním tohoto problému jsem přišel na další zvláštnost,
 pokud se na stránce v místech špatné zobrazení přejelo myší nebo se vybral text pozadí bylo okamžitě
 zobrazeno správně. Jinými slovy, pokud se jakkoliv podařilo přinutit prohlížeč danou oblast překreslit, bylo zobrazení již korektní.

Závěr a řešení

Z výše uvedeného tedy vyplývá, že pokud bychom přinutili prohlížeč stránku nebo kontejner
 znovu vykreslit bylo by zobrazení pozadí pomoci background-image korektní.
 Ja jsem to vyřešil velice jednoduchým hackem, na událost onload jsem spojením
 DOM a CSS, nastavil vlastnostdisplay na hodnotu block pro element obalující
 tabulku s tímto pozadím, tím jsem přinutil prohlížeč znovu překreslit danou oblast a korektně zobrazit
 inkriminované pozadí.

Kód je velice jednoduchý a vypadá takto

document.getElementById('nadrazeny-kontejenr').style.display='block'

Verze na Medium

Související články

Související epizody CZ Podcastu