Safari 中 CSS 的 linear-gradient 漸層有奇怪陰影

同事在公司的測試網站中找到一個錯誤：當他用手機的 Safari 測試時，在 .title-bg 的 H2 標題中，會出現奇怪的陰影：

See the Pen Safari Transparency Test by Eric Chuang (@eric-chuang) on CodePen.

上述的範例須透過 Safari 才能看出差異。

因為平常都是透過 Chrome 來進行測試，因此沒有注意到這個問題。後來發現這是 Safari 對樣式屬性值 transparent 有不同的理解導致。

在 Chrome 與 Firefox 中，所謂的「透明」 transparent，等同於 rgba( 255, 255, 255, 0)，但是在 Safari 中，「透明」是 rgba( 0, 0, 0, 0 )。這代表如果在漸層的過程中，直接使用 transparent 的話，漸層的其中一個方向會是黑色的背景。