Why does this page Jerk up and down when you scroll down and refresh?

Get Started
1

I created a rough draft for an example.

The page works fine when it is at the top meaning not scrolled down.

However, when you scroll down a little and fresh in IE, you noticed the page jerks slightly up and down.

Please note, I added height to the divs to simulate contents.

Any idea why or a fix?

Thanks everyone.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body{
	margin: 0;
	padding: 0;
}
html{
	min-height: 100%;
	margin-bottom: 1px;
}
#box, #box2{
	width: 1006px;
	height: 900px;
	margin: 0 auto;
	background-color: #666;
}

#box2{
	width: 1006px;
	height: 400px;
	margin: 0 auto;
	background-color: #000;
}
</style>
</head>

<body>
<div id="box">
<div id="box2">
</div>
</div>
</body>
</html>
2

Not 100% sure but you are defining 2 different heights for Box2. You assign 900px in the first part of the stylesheet and 400px later on so maybe IE is getting confused.

3

Are you talking about the fact that if you refresh the page then IE draws the page as normal and then applies the scroll afterwards to get the page back to where it was when you clicked refresh?

If so then that’s just the way it works and the page gets drawn and then scrolled so you get a little jump as it scrolls. You can see this by looking at the scrollbar as you refresh. IE is always a little slow on the redraw and there’s not much you need to do about it.

4