IE9 scroll jumps to the top when the browser has a scrollbar
Internet Explorer 9 has one very strange behaviour where inner div's with scrollbars can jump up to the top by themselves.
In my case the problem happened when using jquery ui resizable and draggable on DIVs, when using IE9 and the browser has scrollbars (note that the problem only happens when the browser has scroll bars). If the DIV has an inner DIV with height 100% and overflow scroll or auto. When the outer DIV was resized or dragged the scroll of the inner DIV would jump to the top.
After a long investigation (with no google references found at all) I came down to this simple demo of the problem:
I filtered the problem down to changing the absolute position of a div in IE9 with scrollbars on the browser.
The solution: set "position: relative" on the BODY.
<html>
<head runat="server">
<title>TEST</title>
<script type="text/javascript" src="/Spreadex.Otp.Fins.Web/Scripts/framework/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="resres" style="width: 1500px; height: 300px; background-color: Red; position: absolute; ">
Test Resizable
<div style="width: 300px; height: 100%; overflow: scroll" id="testScroll">
AAAAAAAAAAA<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
BBBBBBBBBB<br />
CCCCCCCC<br />
<br />
</div>
</div>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<button onclick="res1()">res1</button>
<button onclick="res2()">res2</button>
<script type="text/javascript">
function res2() {
//$('#resres').css({ top: 8 });
document.getElementById('resres').style.top = "8px";
}
</script>
</body>
</html>
posted by Aziz at 18:10
|
1 comments
