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

safariでの現象

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

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

左のキャプチャが期待する表示ですが、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%);