その日、私はとある企業向けのwebアプリのブラウザ検証を行っていた

ブラウザ検証と言っても ie11 と Edge で動けばいいよ～程度のモノだ。

私はまず Edge を立ち上げ、開発サーバのURLを叩き、意気揚々とログインした。
トップページのヘッダに置かれた三本線のボタンを押すと、縦に並べられたメニューが画面左側からフェードインしてくる。
いわゆるハンバーガーメニューだ。

(´-`)oＯ(とりあえず上から順に一通りのメニューを開いてみるか)

私はメニューの数を数えるように、何気なくマウスをメニューの上でゆっくりと滑らせた。
そのとき事件は起こった。

あれ……？メニューの表示が何かちらつくぞ……？

メニューに引かれた borderが、マウスの動きに合わせて消えたり現れたりしていたのだ。
間違ってもそんな仕様ではない。
おかしい、以前は普通だった気がするのだが……？

Edgeでも動作確認してたハズだけどな……

下はこの現象を再現出来るコードだ。

See the Pen NWWwooe by 8810hayate (@K-Z) on CodePen.

と言っても、この現象は特定の条件によって発生するものなので、この画面を触ってみても、この記事をご覧の方の環境では現象が再現しないかもしれない。

現象が発生したときのスクショを併せて貼っておく。

本来は全てのメニューに 1px のボーダーボトムが設定されていたのだが、画像では消えてしまっているのがお分かりいただけると思う。

そして調査が始まる

とりあえず、IE、Edge、おまけでChromeを立ち上げてメニューの上で同じようにマウスを動かしてみる。

……現象が再現するのは Edge だけだ。

じゃあ Edge の不具合？なのか？？

次に隣の後輩に自分の画面を見せる。
説明して、後輩の端末でも同じことが起きるか確認してみた。

すると……
再現しない！！

これはビンゴだ、しめしめ。
OSやブラウザのバージョンを後輩と比較して確認してみる

……しかし。

全く同じだ。

私がテストしていた端末、後輩の端末のOS、ブラウザのバージョンは以下の通りで、全く同じだったのだ。

OS Windows 10 Pro
バージョン 1809
OSビルド 17763.775

IE バージョン 11.775.17763.0
IE 更新バージョン 11.0.147

Microsoft Edge 44.17763.771.0
Microsoft EdgeHTML 18.17763

Google Chrome 78.0.3904.70

OS や Edge のバージョンによるものではない……。

発生条件は何だ！？

私と後輩の環境で何が違うのか……バージョンじゃないとすると何かしらの設定か……？
特別な設定なんて何か入れたっけ……？

そのとき、後輩が私の画面を見ながら不思議そうに呟いた。

「先輩の画面、少し文字が大きいですね」
「え？」

原因は拡大率？

私が自分の端末の Edge で拡大率を確認すると 105%、後輩のところは 100% だった。

まさかそんなことで……？
じゃあ、拡大率を変えれば他のブラウザでも現象が再現するのか……？
私は後輩に礼を言って、自分の端末に向き直り、改めてそれぞれのブラウザで拡大率を変えながら確認する。

結果……

IE11
拡大 80% 85% 90% 95% 100% 105% 110% 115% 120% 125%
いずれも現象再現なし。

Microsoft Edge
拡大 80%、85%、105%、110%
現象再現。
拡大 90%、95%、100%、115%、120%、125%
現象再現なし。

Google Chrome
拡大 80% 90% 100% 110% 125%
いずれも現象再現なし。

やっぱ Edge だけやんけ！なんやこれ！

border-top の場合は発生しない！？

理屈はよく分からないが、現象が発生する環境はある程度絞られた。
なら、どうコードを修正すればこの現象を避けられるのだ？

私はコードを弄りながら試行錯誤を繰り返した。
余分なモノを少しずつ削りながら、現象が再現するか確認しては元に戻す。

そうして分かったことは、

border-bottom

は消えたり現れたりするが、

border-top

ならセーフだということだ。

Edge を使用出来る環境の方は、先ほど上に載せたコードで発生していた現象が、この下に載せたコード(スタイルシートのborder-bottomをborder-topに書き換えたもの)で発生しないことがおそらく確認出来ると思う(『思う』と言っているのは、もしかしたらOSやブラウザのバージョンで再現しないものもあるかもしれないからである。そこまでの検証は出来ていないので)。

See the Pen RwwjdPy by 8810hayate (@K-Z) on CodePen.

また、調査を進めるうちに、border-bottom であっても、メニューの float を解除すれば現象が再現しないことも分かった。

完全に解決したとは言えないが

いや、でも俺は bottom にボーダーを引きたいし、float にしたいんだよ。
どうしろっての？

頭を捻って無理やり解決した。
border-bottom はやめて、border-topにする。
ただしこれではボーダーの位置が変わってしまうので、一番上のメニューだけボーダーを消し、一番下のメニューの下に架空の高さ1pxのメニューをでっちあげた。

See the Pen oNNoVjG by 8810hayate (@K-Z) on CodePen.

おわりに

書いておいて何だが、これで表面上は解決できるのだとしても、ある種のバッドノウハウじゃないかと思う。
もっといい解決は何かないものか……