css - Media Query doesn't change CSS when Maximizing Browser and Switching Tabs

Question

Here is a bit of CSS that has a simple media query.

http://codepen.io/anon/pen/nuxaw

When I shrink the page so that the view port is less than 320, the box turns green. Now if I follow these steps, the browser will be maximized, but the CSS will still be in the state defined by the media query at 320px.

1. With the page opened in the first tab, and the browser sized so that the < 320px media query is enabled,
2. Open a new tab, Browse to a website, like facebook.com.
3. Maximize the browser.
4. Take an extended browsing session away from the first tab. Do not reactivate the first tab for a few minutes.
5. Activate the first tab with the window maximized.
6. At this point, the view port should be full screen, but the element should still be the green block.

This means the <320 media query is still applied. If you open the debugger though, you'll see that the CSS applied though is the normal CSS. Is this a bug with Chrome?

http://imgur.com/a/TIAAi

Here's an album on imgur that shows the sequence.

1. Opened, maximized.
2. Reduced viewport, media query enabled.
3. Maximized, still using media query.
4. Looking at the CSS, it says that the dimensions are 300x200, but the UI shows 100x100. Something is broken.

Answer 1

解决此问题的方法是说服 Chrome 更新页面上的渲染。您可以通过调整大小、最大化或更改 body 标签上的类来实现。我已经更新到 codepen 以使用在选项卡切换期间触发的可见性更改事件来切换正文上的类以强制 Chrome 更新页面呈现。

http://codepen.io/anon/pen/nuxaw