兵庫県三田市でホームページ製作をしているゴリラドットです。

cssのlinear-gradientっていうとストライプ柄をcssだけで作ったりけっこう楽しいやつ、ですよね。ドット柄水玉模様柄も同じような系統のradial-gradientで作れるしとにかく画像用意しなくていいのがラクチン。

そんなlinear-gradientですが透明色の指定としてtransparentを指定しているとアイフォンでのみ黒っぽいグラデーションになっちゃってぜんぜん透明じゃないじゃん！と意図しない縞模様になっちゃうんですよね。

というコトでここではlinear-gradient、そしてtransparent、最後にアイフォンの3つに関連したバグの解決方法を紹介しますね。

 

解決方法：transparentを使わない！

gradient系の透明色でtransparentを使うとアイフォンで黒くなる現象の解決方法はズバリ！transparentを使わない！です。

 

……

 

…

 

いや、バカにしてんの？と言われちゃいそうですがこれがれっきとした解決方法。

transparentではなく「rgba(255,255,255,0)」を使えばアイフォンでも黒くならずにきれいな透明になります。とりあえずgradient系の中でtransparentて書いちゃってる箇所をぜんぶ「rgba(255,255,255,0)」に置換すればOK。難しいことは考えないでいいのです。

 

transparentは透明な黒色！

難しいことも知りたいじゃん！というあなたへ。サクッとなんでそうなるの？を。

transparentってなんか手癖で打っちゃいますよね。私もです。「透明にしたいからtransparentっと！」的な感じでチャチャっとやっちゃってます。

でもtransparentっていうのは黒の透明を表します。rgba()で書くと「rgba(0,0,0,0)」と同じ。アイフォンの場合は透明にはなってるけどもとは黒だよねー、んじゃグラデーションでも黒色出しちゃうね！という処理になっているようです。

なので普通にtransparentを使うとアイフォンでのみ黒っぽくなっちゃう、と。

 

「rgba(255,255,255,0)」の方は白色の透明なのでアイフォンでも、もちろんそれ以外のブラウザや環境でもきれいに表示されるようになります。

 

まとめ

linear-gradientのようなgradient系で透明色としてtransparentを指定していると黒っぽくなっちゃう問題の解決方法を紹介しました。

ようは頭空っぽにしてtransparentを「rgba(255,255,255,0)」に置きかえろ！そうすりゃきれいな透明になる！ということでした。お試しくださいね。