CSS Media Queries と スクロールバー
ブログサービスにCSS Media Queriesを使ったカラム数可変の公式テンプレートを作ってて気づいたんだが、
Media QueriesのwidthとかheightでCSSを変化させて、その際にスクロールバーの有無が変化した場合どうなるんだ?
って疑問がわいた。
スクロールバー分で変化しないなら問題ないんだが、スクロールバーのサイズでMedia Queriesのwidthとかの値が変わってしまうと
、
Media QueriesでCSSを切り替えて、その際にスクロールバーの有無が変化し、
それによってMedia Queriesの結果が変わり、無限ループでブラウザが死ぬ可能性がある。
調べたところ、
「スクロールバーを含むサイズ」
らしい。
ただ、Webkit系ブラウザはバグでスクロールバー有無でサイズが変化してしまうみたい。
Media Queriesを使わずにJavaScriptでresizeイベントによって同じ様にCSSやレイアウトを切り替えることもできるが、
スクロールバーの有無の変化考慮しないと危険だね。
というか、JavaScriptでwindowサイズによるレイアウト切り替えは多分やらんほうがいい。