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%);
}
こんな風に、蛍光ペンが濁ったようなデザインになります。
ある意味では、現実をリアルに再現している気がしなくもないのですが、もちろん綺麗な色にしたい人がほとんどだと思います。
修正後のソースコード
rgbaで白側に寄せて記述すればOKです。
#blog_area #post_wrap #post_body p span.yyy{
background: linear-gradient(rgba(254,254,152,0) 30%,#FEFE98 90%);
}
これで、きちんとした色合いになりました。
なんでこうなるの?
現状、ブラウザによって、transparentの認識が異なるためです。詳しくはこちらのブログさまにて、詳しく紹介あります。
信じがたいことですが、iOS側のほうで、少し古い認識をする部分があるようですね。
まとめ
CSSの蛍光ペン下線が黒く濁って汚れている! という時は、ひとまずtransparentを見直してみましょう。