Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

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 的話,漸層的其中一個方向會是黑色的背景。

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料