Chromeでカーソルから離れた位置のリンクに下線が入る問題

ishikawa999 commented 4 years ago

プロジェクト画面のニュース
チケット一覧画面などで確認済み

ishikawa999 commented 4 years ago

問題が発生した環境

macOS Mojave
Chrome(safariでは再現せず)
Redmine trunkに4.1ブランチのbleuclairを適用

ishikawa999 commented 4 years ago

参考:

https://stackoverflow.com/questions/52360968/wavy-text-decoration-remains-when-no-longer-hovering-chrome https://www.ossi.co.jp/topics/2013/05/000030.php https://kiyotatsu.com/web13/

Chrome かつヒラギノ角ゴPro等、日本語フォントの環境で、 a:hover時にのみtext-decoration: underlineを指定していると発生する。

a:hover, a:active {
  outline: 1px solid transparent;
}

のように指定することで対処する。

タブキーなどで要素にフォーカスを当てた状態でカーソルを乗せるとoutlineが消える(透明になる)問題が発生するが、頻度として下線の問題の方が多いためそちらを優先する

ishikawa999 commented 4 years ago

上記の対策を行った上でも再発するため、Reopen。

font-familyが Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Sans", "MS PGothic", Verdana, system-ui, sans-serif だったところを Verdana, "Helvetica Neue","Helvetica", Arial, Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; に変更したら下線の問題は発生しなくなった。

欧文フォントの指定が日本語フォントより先になく、従属欧文が利用されていたことが関係している？かもしれない。

ただ、上記のfont-family変更による対策を行った場合、
今まで日本語フォント優先の表示にしていたため「¥」として表示されていた部分が、欧文フォント優先に変えたことによって「/(バックスラッシュ)」に変わってしまうという問題がある。
この問題は無視できないため、従属欧文を利用したままで下線がおかしくならない他の方法で対策したい。

ishikawa999 commented 4 years ago

シンプルな対応としては、hover時に下線を出すのをやめて文字色を赤くするだけにするというものが考えられる。(そもそも下線を出さないため、下線の表示が崩れることもない)
ただ、リンクとしては下線が入る動きが一般的なので、それを崩してもリンクだと捉えてもらえるかを試してみてからの変更にする。

farend / redmine_theme_farend_bleuclair

Chromeでカーソルから離れた位置のリンクに下線が入る問題 #9