redmine_theme_farend_bleuclair
redmine_theme_farend_bleuclair copied to clipboard
farend
Chromeでカーソルから離れた位置のリンクに下線が入る問題
問題が発生した環境
- macOS Mojave
- Chrome(safariでは再現せず)
- Redmine trunkに4.1ブランチのbleuclairを適用
参考:
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が消える(透明になる)問題が発生するが、頻度として下線の問題の方が多いためそちらを優先する
上記の対策を行った上でも再発するため、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変更による対策を行った場合、
今まで日本語フォント優先の表示にしていたため「¥」として表示されていた部分が、欧文フォント優先に変えたことによって「/(バックスラッシュ)」に変わってしまうという問題がある。
この問題は無視できないため、従属欧文を利用したままで下線がおかしくならない他の方法で対策したい。
シンプルな対応としては、hover時に下線を出すのをやめて文字色を赤くするだけにするというものが考えられる。(そもそも下線を出さないため、下線の表示が崩れることもない)
ただ、リンクとしては下線が入る動きが一般的なので、それを崩してもリンクだと捉えてもらえるかを試してみてからの変更にする。