8. 5. 2021

Transparentní CSS přechod – řešení problému v Safari

Občas při kódování šablony narazím na to, že potřebuji pro pozadí elementu použit CSS přechod z nějaké barvy do ztracena / transparentní barvy. Samozřejmě je vhodné k tomu použit řešení pomocí CSS gradient – v mém případě konkrétně linear-gradient. Každého tedy určitě napadne to vyřešit následujícím způsobem.

CSS

Podpora CSS gradientů v prohlížečích je poměrně dobrá a není důvod, proč je nepoužívat.

Can I Use css-gradients? Data on support for the css-gradients feature across the major browsers from caniuse.com.

U Safari si však můžeme všimnout pouze částečné podpory a problém spočítá právě v použití transparent barvy v přechodu.

Špatné vykreslení transparentního přechodu v Safari

Pro ukázku jsem vytvořil tento snippet na Codepen.io. V ukázce jsou dva příklady řešení, které se ve většině prohlížečů budou vykreslovat totožně – přechod z červené barvy do průhledné. Pokud však snippet otevřeme v Safari, už na první pohled jde vidět rozdíl a problém špatného vykreslení, viz obrázek níže.

Špatné vykreslení přechodu v Safari vlevo

Vlevo je vidět, že za použití kódu, který jsem ukazoval hned na začátku, není výsledek vůbec takový, jako bychom očekávali. Přechod není z červené do průhledné, ale spíše do nějaké šedivé. Vpravo pak jde vidět správné zobrazení za použití drobného hacku.

Řešení pro Safari

Řešení problému je poměrně jednoduché, ač hned nemusí každého napadnout to takovýmto způsobem řešit. Jak už jsem zmínil, problém je v použití klíčového slova transparent v našem přechodu, které musíme něčím nahradit. K tomu využijeme možnost nastavení barvy pomocí CSS rgba() funkce, která nám umožňuje nastavení alfa kanálu barvy, tedy její průhlednost. Díky tomu můžeme použit bílou barvu a nastavit jí úplnou průhlednost. Výsledný kód, který funguje správně i v Safari, budete tedy vypadat takto:

CSS
Sdílet

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *