【CSS】linear-gradientでtransparentを使って透過させると、iPhoneで黒くなって汚い（iOS・safari対策）

hoge

画像要素の上に、背景をlinear-gradientでグラデーションした別要素を被せてみたら、

iPhoneのsafariブラウザの時だけ、重なり部分が黒くなって汚く表示されていた。

 

どうも、透過部分をtransparentと記述することが気に入らない様子。

 

いろいろイジッてて、結局「transparent」→「rgba(xxx,xxx,xxx,0)」にしたら、ちゃんと目的通りに動作しましたよ。。。

 

 

CSS

 

// NG
background:linear-gradient(transparent 0%, rgba(111,222,333,1) 50px, transparent 100%);
background:-webkit-linear-gradient(linear, transparent 0%, rgba(111,222,333,1) 50px, transparent 100%);
background:-moz-linear-gradient(linear, transparent 0%, rgba(111,222,333,1) 50px, transparent 100%);

// OK
background:linear-gradient(rgba(111,222,333,0) 0%, rgba(111,222,333,1) 50px, rgba(111,222,333,0) 100%);
background:-webkit-linear-gradient(linear, rgba(111,222,333,0) 0%, rgba(111,222,333,1) 50px, rgba(111,222,333,0) 100%);
background:-moz-linear-gradient(linear, rgba(111,222,333,0) 0%, rgba(111,222,333,1) 50px, rgba(111,222,333,0) 100%);

メンドクサイデスネ（ぼそっ）