透過のCSSグラデーションでSafariだけ黒くなる原因と解決法

透過のCSSグラデーションでSafariだけ黒くなる原因と解決法

CSSで透過グラデーションを作った時、safari・iphoneのみ、透明にならず黒の透過になってしまう現象があったので解決方法をメモしておきます。

safariでの現象

background: linear-gradient(to bottom, transparent 0, #fff 30%);

上記のようにlinear-gradientを使用して白のグラデーションを作成しました。

CSSグラデーションでSafariだけ黒くなる

左のキャプチャが期待する表示ですが、safariでは右のようにグラデーション部分が黒くなってしまっています。

原因は透過部分に指定しているtransparentです。
transparentは「透明」という意味ではなく、rgba(0, 0, 0, 0)のショートハンドで、「黒の透明度0」だそうです。

transparentではなくrgba()指定で

なので、transparentで指定している部分をrgbaの記述に変更すればsafariでも透明なグラデーションになります。

(今回は白のグラデーションなのでrgbaで白を指定)

background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);

See the Pen linear-gradient by Glatch (@glatch) on CodePen.

私たちGlatchはコーポレートサイト制作を得意とするWeb制作事務所です。
お気軽にご相談・お問い合わせください。