iPhoneでCSSの蛍光ペン下線が黒く濁った時はtransparentを見直す

IT/web

iOS(macも)では、CSSのtransparentをただの透明でなく、rgba(0,0,0,0)の透明として扱うため、グラデーション指定をする時、黒く濁ってしまうエラーがあります。

そのため、transparentにしていたコードをrgbaにすると改善できます。

黒く濁るソースコード

このように書くと、

#blog_area #post_wrap #post_body p span.yyy{
  background: linear-gradient(transparent 60%, #ffff66 80%);
}

こんな風に、蛍光ペンが濁ったようなデザインになります。

CSS 蛍光ペン下線の濁り width=

ある意味では、現実をリアルに再現している気がしなくもないのですが、もちろん綺麗な色にしたい人がほとんどだと思います。

修正後のソースコード

rgbaで白側に寄せて記述すればOKです。

#blog_area #post_wrap #post_body p span.yyy{
  background: linear-gradient(rgba(254,254,152,0) 30%,#FEFE98 90%);
}

これで、きちんとした色合いになりました。

CSS 蛍光ペン下線の濁り

なんでこうなるの?

現状、ブラウザによって、transparentの認識が異なるためです。詳しくはこちらのブログさまにて、詳しく紹介あります。

信じがたいことですが、iOS側のほうで、少し古い認識をする部分があるようですね。

まとめ

CSSの蛍光ペン下線が黒く濁って汚れている! という時は、ひとまずtransparentを見直してみましょう。

最後に一言

完全なクロスブラウザは永遠のテーマ。

この記事をSNSでシェアする?

iPhoneでCSSの蛍光ペン下線が黒く濁った時はtransparentを見直す


  • 0
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。