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.

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

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.

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: