CSSのグラーデーションでtransparentを指定したときにSafariで黒くなる

CSSのグラーデーションでtransparentを使って一部を透過した際、Safariだけ透過部分が黒くなってしまうことがあったのでその対応方法をメモ。

サンプルコード

まず透過部分が黒くなってしまったサンプルです。

<section class="section"></section>

.sectionに下固定で画面サイズに応じて引き伸ばす背景画像を設定して、見切れてしまう上部分に擬似要素でグラデーションをかけて、徐々に白くする設定を行います。

section {
	position: relative;
	height: 800px;
	background: url(bg.jpg) center bottom no-repeat;
	background-size: cover;
}
section::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-image: linear-gradient(#fff 5%, transparent 100%);
}

Safariで透過部分が黒くなるデモページ
これで基本的には意図した表示にできたのですが、Safariだけ以下のようにグラデーションの透過部分が黒くなってしまっていました。

chromeの場合

Safariの場合

対応方法ですが、transparentで等価を指定している部分をrgba()で指定するといいようです。
今回は白のグラデーションなのでgba(255,255,255,0)とします。

section {
	position: relative;
	height: 800px;
	background: url(bg.jpg) center bottom no-repeat;
	background-size: cover;
}
section::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-image: linear-gradient(#fff 5%, rgba(255,255,255,0) 100%);
}

これでSafariでも意図した表示になりました。
対応後のデモページ