10
ここでは単純なメディアクエリを持つCSSが少しあります。ブラウザの最大化とタブの切り替え時に、メディアクエリでCSSが変更されない
http://codepen.io/anon/pen/nuxaw
ビューポート未満320となるように、私はページを縮小するとき、ボックスが緑色に変わり。これらの手順を実行すると、ブラウザは最大化されますが、CSSは320pxのメディアクエリで定義された状態になります。最初のタブで開いたページ、および< 320PXメディアクエリーが有効になっているようなサイズのブラウザで
- 、
- 新しいタブを開くには、facebook.comのように、ウェブサイトを参照します。
- ブラウザを最大化します。
- 最初のタブから離れてブラウズセッションを延長します。最初のタブを数分間再アクティブ化しないでください。
- ウィンドウを最大化して最初のタブをアクティブにします。
- この時点で、ビューポートはフルスクリーンでなければなりませんが、要素はまだ緑色のブロックでなければなりません。
これは、メディアクエリがまだ適用されていることを意味します。しかし、デバッガを開くと、CSSが正常に機能していることがわかります。これはChromeのバグですか？
ここでシーケンスを示しimgurのアルバムです。
- 開かれた、最大化された。
- 縮小されたビューポート、メディアクエリが有効になりました。
- メディアクエリを使用して最大化しました。
- CSSを見ると、寸法は300x200ですが、UIは100x100と表示されます。何かが壊れています。
私は、これは通常とChromeがページをレンダリングする方法に関連していると言うでしょう。そのページを非アクティブにしてブラウザのサイズを変更したため、ページを再レンダリングしません。インスペクタを開くと、インスペクタが正しいフィードバックを表示します。レンダリングが変更されていないことだけです。私はこれが通常のユースケースではなく、それを心配しないと言います。 – aaronburrows
はい、通常の使用例ではありません。定期的なサイト訪問者がこれを遭遇する可能性は非常に低いです。 –
私は反応的に構築されているアプリケーションを持っています。それはクライアントのためのタブとして一日中生きるでしょう。このバグはすぐに明らかです。 – Rick