先日、macOS版のFirefoxブラウザにてメディアクエリに関する不具合を確認しました。
その件について調べたこと、わかったことをメモとして残しておきます。
以下、不具合発生時のOSとブラウザのバージョンです。
- macOS：Mojave 10.14.5（18F132）
Firefoxですが、現行版と開発者版の2つのバージョンで不具合を確認しました。
- 現行版：70.0 (64-bit)
- 開発者版：71.0b4 (64-bit)
なお、以下のブラウザでは不具合を確認できませんでした。
- Google Chrome: 77.0.3865.120 (Official Build) (64-bit)
- Safari: 12.1.1 (14607.2.6.1.1)
バージョンは省略しますが、Windows版のIE11・Edge・Google Chrome・Firefoxではどれも問題なく表示されているのを確認しましたので、どうやらmacOS版固有の症状のようです。
不具合について
不具合が発生したページ
HTMLのlink要素にてメディアクエリの「max-device-width」および「min-device-width」を指定することで、CSSの読み込みを分岐させているページ
行った操作
当該ページを表示中にブラウザのウィンドウサイズを変更をする
症状
- デバイスの画面幅を参照しているにも関わらず、ウィンドウサイズの変化によってスタイルが切り替わってしまう
- device-widthで指定していた幅とウィンドウサイズが一致していなくても、スタイルの切り替わりが発生する
- この症状は左側あるいは下側からウィンドウサイズを狭めていった時のみ発生する
なお、この症状はサブディスプレイとして接続している解像度1080pのモニターでは発生しない模様です。（メインディスプレイはiMacのRetina 5Kディスプレイです）
詳細
不具合を確認したページでは、PC版とモバイル版のスタイルを、device-widthを利用してデバイスの画面幅を調べ、それによって切り替えていました。
しかし、モバイル版のスタイルは、デバイスの画面幅が200px〜480pxの間でのみ適用されるはずなのですが、Firefoxのウィンドウサイズを狭めると、本来PC版では適用されないはずのモバイル版のスタイルが適用されたりしました。
また、奇妙なことにdevice-heightやheightを一切指定していないにも関わらず、画面の高さを狭めてみてもスタイルの切り替えが発生しました。
この件について、当初はFirefoxがバグを起こしているだけかと思っていましたが、調べたところdevice-widthが現在のウェブ標準から削除され、非推奨となっていました。
参考：device-width – CSS: カスケーディングスタイルシート | MDN
対処
やはり今回の件についてはFirefoxの不具合が原因かと思いますが、device-widthが非推奨になっている以上、今後はこの指定を利用するべきではないでしょう。
今後、メディアクエリで幅を指定する場合は、「device-width」や「device-height」を利用するのではなく、「width」や「height」で分岐させるようにしたほうが良いと思います。