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

The fix for this issue is to convince Chrome to update the render on the page. You can do it by resizing, maximizing, or changing a class on the body tag. I've updated to codepen to use a visibilitychange event that fires during tab switching to toggle a class on the body to force Chrome to update the page render.

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