特定のウィンドウサイズで検索欄の見た目が崩れる

概要

https://gyazo.com/0d6bd345fb1bc8becd02b1eaed144207https://gyazo.com/83808e0def3842d9fbc064c9a225f89f

解像度が1920×1080、拡大/縮小が125%のディスプレイの半分でScrapboxを開くと、検索欄の見た目が崩れる。Rutile3.icon

見た目が崩れるからか、『Scrapboxへの要望』や『Date created』、各ページでスクロールすると右上の『ℹ️』の当たり判定が吸われる

検索欄の下にある黒い線より上は、検索欄がホバーして当たり判定が吸われている？

#app-container > div > nav > div > divの子要素？

環境

Windows11

ブラウザ

Chrome

バージョン: 109.0.5414.120（Official Build）（64 ビット）

再現方法

ChromeのDevToolsで横幅を767にすると再現できるかと

https://gyazo.com/84dad954fd7aaf638491680dc10bcbc0

同様の報告

コメントなど

たしか、スマホ版表示をmax-height: 767px、それ以外をmin-height: 768pxにしていることが原因のバグだった気がしますMijinko_SD.icon

整数だけで見ると全ての画面幅をカバーしているように見えますが、実際の画面幅の数字には小数以下も存在している

なので、例えば画面幅が767.1pxみたいな曖昧な数字だと、両方のプロパティが適用されずに不完全な表示になってしまう

でもどうやら挙動を見た感じ、767.0pxに設定してもmax-height: 767pxの方は適用してくれないみたいですね

max-heightは設定値未満の値にしか適用してくれないのかも

@media(min-width: 768px)を@media(min-width: 767px)に置き換えれば、このバグは発生しなくなりますMijinko_SD.icon

https://gyazo.com/2a00f0970c0c5c14c73d7582d4533dc3

直すとすると、新しいメディアクエリ、コンテナクエリを使う方法がよさそうですね。BugbearR.icon

UserCSSを作って解決できました！Rutile3.icon

https://gyazo.com/51d973cb6a17afd3185fad8a666e0277