18.10.2020
Es gibt viele Anwendungsfälle für Farbverläufe, welche teilweise transparent dargestellt werden. Jedoch gibt es ein Problem mit Safari, und somit auch iOS, welches man immer bedenken muss.
In der Erwartung sieht das Ergebnis von einem Farbverlauf von rot zu transparent auf einem rosa Hintergrund wie folgt aus:
Farbverlauf Erwartungshaltung - ambientimpact.com
Entgegen der Erwartungshaltung verhält sich der Farbverlauf unter Safari und iOS jedoch wie folgt:
Farbverlauf Safari - ambientimpact.com
Der Verlauf zu Grau kommt daher, dass Safari für Transparenz schwarz und nicht zu weiß verwendet. Das Interessante an diesem Verhalten ist, dass beide Varianten korrekt sind. Sowohl die wie erwartet angewandte transparenz in Chrome, Firefox und co. als auch der Verlauf zu schwarz von Safari. Die CSS Color Level 3 Spezifikation gibt Folgendes als Grundlage für die Browser:
transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
Das bedeutet das in der Spezifikation explizit der Verlauf zu Schwarz zu erwarten wäre.
Zu Glück gibt es eine Lösung für dieses Problem. Anstatt das Ende des Verlaufs als transparent anzugeben, sollte man die Anfangsfarbe mit dem Alpha-Wert von 0 setzen.
background: linear-gradient(
to bottom,
#ff0000,
rgba(255, 0, 0, 0)
)SCSS
background: linear-gradient(
to bottom,
#ff0000,
rgba(#ff0000, 0);
)CSS ab Color Module Level 4
background: linear-gradient(
to bottom,
#ff0000,
color(#ff0000 alpha(0%))
)Leider ist Color Module Level 4 noch ein Arbeitsentwurf und somit kaum unterstützt.
Was auf den ersten Blick wie ein Bug aussieht kann eine andere - nicht weniger korrekte - Interpretation derselben Spezifikation sein. Glücklicherweise gibt es für diese Inkonsistenz eine Lösung.
Das größte Problem bei diesem Verhalten ist, das Entwickler unter Linux und Windows dieses Verhalten teilweise erst durch den Kunden aufgezeigt bekommen die dann unter iOS und OSX die Ergebnisse sich anschauen.