Chromeで拡大した場合にborderの幅が変化する

明確には原因を特定できていませんが、症状と一応の対応策はできたのでメモ的に残します。

[2020.8.26 追記]
Chrome 84.0.4147.135 で確認したところ、当ページのサンプルは正常に表示されており、線幅が増減しないことを確認しました。
バージョンが上がって改善されたのかどうかは不明です。

[2021.6.25 追記]
Chrome 91.0.4472.114 で確認したところ、再び当ページのサンプルが以前のように線幅増減することを確認しました。

[2021.7.8 追記]
線幅増減するのではなく、拡大の有無にかかわらずborderを設定した要素の高さか何かが増減しているようです。
また原因は突き止められていませんが、線だけでなく前後のコンテンツも上下に少し動きます。
以前はそうではなかったと思うのですが、現在は線幅ではなくheight:0;にしてborderを設定した要素の高さが変化する状態の模様です。
110%など少しでも拡大すると要素に設定した背景色が見えるので、その点は変わらずでした。拡大しないと背景色は見えません。

起きた問題

• Chrome使用(確認時のバージョンは80.0.3987.149)
• divなどをheight:0;にしてboder-bottom(またはborder-top)を指定する
• 拡大率を125%以上にすると、線の幅が増減する

言葉ではちょっとわかりにくいので、以下の2本線のサンプルで確認いただく方がわかりよいかと思います。

Chromeで125%以上に拡大してから、ブラウザ幅を1000px以下に縮ませると、上下どちらかの線幅が1px増減するはずです。

対応策

• border-bottomをつけた要素にborderの幅より1px程度大きい値でheigtを設定する
• borderよりも上部に、高さ可変の要素を置かない

発生条件

• borderより上に高さ可変の要素がある(例:メインビジュアルの画像をwidth:100%;などにし、ブラウザ幅の伸縮に応じてアスペクト比を維持したまま高さが変化する状態)
• borderをつけた要素にborder-width以下のheigtが設定されている(またはheight:0;
• 拡大率125%以上にする(厳密には110%でも変化する部分がある)

改行による行数増加で高さが変わる場合などは問題ありませんが、小数点以下の値で高さが微妙に変化する要素の影響が出ているように見えました。

height:0;でbackground-color:red;などにすると、110%でもブラウザ幅によっては以下サンプルのように赤色が見えるため、125%以下でも影響はあるようです。

結び

小数点以下の変化がCSSによる装飾に影響を与えることは確認していましたが、拡大しないと発生しないので初見の状況でした。

ブラウザがよしなに調整してくれる仕組みは楽なのですが、こういう問題に遭遇するといろいろ作り方を見直さねばなりません。