크롬 브라우저에서 간혹 미디어쿼리가 제대로 작동하지 않을 때가 있다.

아래와 같은 순서로 테스트해보면 간혹 버그가 발생한다.

1. 미디어쿼리로 만든 웹사이트를 크롬에서 연다.

2. 미디어쿼리의 영역에 해당되는 모습이 나오게 창을 줄여본다.

3. 크롬 브라우저의 상단에 새 탭을 눌러 임의의 사이트를 접속한다.

4. 그 상태에서 창을 최대한으로 키워본다.

5. 어느정도 임의의 사이트를 이용한 후 미디어쿼리로 만든 웹사이트가 있는 탭을 클릭한다.

6. 바로 이때 이미 최대한의 크기의 브라우져이기 때문에 미디어 쿼리가 그 크기에 맞게 조절되어야하는데 2번에서 지정한 모습으로 늘어났을 것이다.

일단 이러한 현상이 발생하는 이유는 랜더링을 갱신하여 보여주지 않았기 때문이다.

국내에서는 해결방법에 대한 이슈가 검색되지 않아 구글을 검색하던 중 스크립트로 처리하는 방법을 제안해주었다.

(function() {
    var hidden = "hidden";

    // Standards:
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);
    // IE 9 and lower:
    else if ('onfocusin' in document)
        document.onfocusin = document.onfocusout = onchange;
    // All others:
    else
        window.onpageshow = window.onpagehide 
            = window.onfocus = window.onblur = onchange;

    function onchange (evt) {
        var v = 'sg-tab-bust-visible', h = 'sg-tab-bust-hidden',
            evtMap = { 
                focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h 
            };

        evt = evt || window.event;
        if (evt.type in evtMap)
            document.body.className = evtMap[evt.type];
        else        
            document.body.className = this[hidden] ? "sg-tab-bust-hidden" : "sg-tab-bust-visible";
    }
})();

정보 출처 : http://stackoverflow.com/questions/16694591/media-query-doesnt-change-css-when-maximizing-browser-and-switching-tabs

코드 샘플 : http://codepen.io/anon/pen/nuxaw