【初心者でもわかる】iphoneでtransparentを指定したグラデーションが黒っぽくなってしまう原因と対策方法

どうも7noteです。iphone特有の仕様（不具合）で、グラデーションが黒くなってしまう原因と対策方法を解説

iphoneで以下のようなグラデーションを指定します。

style.css

div {
  background-image: linear-gradient(transparent, #FFF);
}

通常は白っぽいグラデーションになるはずです。
しかしiphoneなどのios端末で見ると、なぜか黒っぽいグラデーションになってしまいます。

グラデーションが黒っぽくなる原因

iphoneなどのios端末ではtransparent = rgba(0,0,0,0)と認識されてしまうようです。

そのため「透明の黒 → 白」へのグラデーションになってしまい黒っぽさがでてしまうようです。

解決

解決方法は簡単で、transparentを使わなければいいのです。

つまり、transparentをrgbaに書き換えてしまいましょう。

style.css

/* ダメな例 */
div {
  background-image: linear-gradient(transparent, #FFF);
}

/* 良い例 */
div {
  background-image: linear-gradient(rgba(255,255,255,0), #FFF);
}

上のソースでは透明→白のグラデーションを作成したいので、もともとtransparentを指定していた箇所をrgbaで書き直しました。

rgbで白を再現する場合はrgb(255,255,255)になるので、これに透明度のaを足してrgba(255,255,255,0)と書くことで白いグラデーションをiphoneでも黒っぽくならずに済みます。

まとめ

ios端末ではtransparent = rgba(0,0,0,0)と認識されてしまう。
なのでtransparentは使わずグラデーションにしたい色のrgba()に書き直して使う！

たとえば赤いグラデーションならtransparentの代わりに、rgba(255,0,0,0)を指定しましょう。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ