HTML
CSS
CSS3

iOSブラウザにおけるリンク下線について(-webkit-text-decoration-skip)

現象

iOSのウェブサイトを見ているとリンクの下線が文字に被っていて線が欠けているものがあった。
対象ブラウザ:chrome、safari

リンク下線.png

調べていくとこれはOSの問題らしくしかも日本語のときによく発生するものらしい。

-> 要はバグと考えて良さそう、だが日本語しか起きてなさそうということを考えると今後修正はされないだろう。

解決策

解決策は下記を挿入してあげると線がしっかり引かれる。

css
a {
  -webkit-text-decoration-skip: none;
}

ただし、途中で英語がはいったりすると・・・・
dO3u0594249483d5a1cac6e83fb58.png
線と文字が被り可読性が悪くなり、調製が必要である。

参考

CSS Text Decoration Module Level 3
https://www.w3.org/TR/css-text-decor-3/#underline-under