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

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を見直してみましょう。