If the browser window width is very close but less than the width defined in a media query, and the page content is long enough to display the vertical scrollbar, Chrome initially renders the page without considering the scrollbar width, then applies the media query when anything on the page causes a redraw.
Resize your window to very close but less than 800px and test these pages in Chrome:
http://mousewave.com/test2.html (redraw triggered with a css hover)
http://mousewave.com/test.html (redraw triggered with moving an element with javascript)
Check this also on Paul O’B’s responsive design example (resize your window to very close but less than 480px and hover something):
http://www.pmob.co.uk/tweetie/index.htm
(Close developer console while testing.)
Code of test2.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body {margin:0; padding:0; font-size:24px;}
#wrapper {background:red; width:200px; height:4000px; margin:0 auto;}
#myDiv {padding:0 0 0 0;}
#myDiv:hover {padding:10px 0 0 0;}
@media screen
and (min-width:800px) {
#wrapper {background:#eee;}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="myDiv">
<div id="myText">Background color changes to red on hover.</div>
</div>
</div>
</body>
</html>