Chrome problem about media query states caused by the scrollbar

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: (redraw triggered with a css hover) (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):

(Close developer console while testing.)

Code of test2.html

<!DOCTYPE html>
			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;}
		<div id="wrapper">
			<div id="myDiv">
				<div id="myText">Background color changes to red on hover.</div>


I couldn’t get it to go wrong on Chrome PC but it does sound feasible that you have found a bug there. What system and Chrome version are you using? If you can reproduce the bug consistently then it might be worth filing a bug report for it.

I’m testing on Windows 7 with an up to date Chrome 17.0.963.56.

I checked with few more responsive sites at and I could reproduce it in all of them all the time.

(Make sure you turn off JavaScript and the Chrome developer panel, for some scripts trigger a redraw on page load instantly which masks the problem I’m describing.)

I still couldn’t reproduce it but it’s probably just me being thick.

It does sound feasible though and most likely a bug that should be reported.

Having this same problem with a site I’m working on. You explained it well, and yes it does appear to only happen in chrome.

Before media query takes effect

Nether Zone

Post media query

I reported a bug using the in browser tool, Wrench > Tools > Report an issue

Still looks like the chrome bug but do you have a link to the problem so we can see it in action?


Note, I am unable to recreate this bug on my mac. Possibly because of the lowered resolution.