<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Safari Fixed > Overflow > Relative Scroll Bug</title>
<style type="text/css" media="screen"><!--
#fixed1 {
position: fixed;
top: 80px;
left: 300px;
width: 150px; }
#fixed2 {
position: fixed;
top: 80px;
left: 500px;
width: 150px; }
#fixed3 {
position: fixed;
top: 80px;
left: 700px;
width: 150px; }
.overflowHidden {
overflow: hidden; }
.relative {
position: relative; }
.absolute {
position: absolute;
top: 0;
right: 0; }
div {
padding: 5px;
margin: 5px;
border: solid 1px #999; }
body {
height: 1000px; }
--></style>
<script type="text/javascript">
function test()
{
scrollTo(0, 64);
}
</script>
</head>
<body onload="test()">
<h4>Safari Fixed / Overflow Hidden Scroll Bug</h4>
<pre>
</pre>
<pre>
#fixed1 {
position: fixed;
top: 80px;
left: 300px;
width: 150px; }
#fixed2 {
position: fixed;
top: 80px;
left: 500px;
width: 150px; }
#fixed3 {
position: fixed;
top: 80px;
left: 700px;
width: 150px; }
.overflowHidden {
overflow: hidden; }
.relative {
position: relative; }
.absolute {
position: absolute;
top: 0;
right: 0; }
div {
padding: 5px;
margin: 5px;
border: solid 1px #999; }
#veryLarge {
position: relative;
height:1000px;
width:1500px; }
</pre>
<p>When you scroll this page the following objects will be clipped:</p>
<p>- (relative objects and overflowHidden objects) inside (overflowHidden objects) inside (fixed objects) will be clipped;</p>
<p>- (relative objects and overflowHidden objects and absolute objects) inside (fixed/overflowHidden objects) will be clipped;</p>
<p>Nice effect, but not what we want. Tested in Safari Version 2.0.4 (419.3), and WebKit Nightly Build Mon Nov 20 5:18:23 GMT 2006.</p>
<div id="fixed1">
#fixed1
<div>
no style</div>
<div class="relative">
.relative</div>
<div class="absolute">
.absolute</div>
<div class="overflowHidden">
.overflowHidden
<div>
no style</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="relative">
.relative</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="overflowHidden">
.overflowHidden</div>
</div>
</div>
<div id="fixed2" class="overflowHidden">
#fixed2.overflowHidden
<div>
no style</div>
<div class="relative">
.relative</div>
<div class="absolute">
.absolute</div>
<div class="overflowHidden">
.overflowHidden
<div>
no style</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="relative">
.relative</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="overflowHidden">
.overflowHidden</div>
</div>
</div>
<div id="fixed3">
#fixed3
<div class="overflowHidden">
.overflowHidden
<div>
no style</div>
<div class="relative">
.relative</div>
<div class="absolute">
.absolute</div>
<div class="overflowHidden">
.overflowHidden
<div>
no style</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="relative">
.relative</div>
</div>
<div class="overflowHidden">
.overflowHidden
<div class="overflowHidden">
.overflowHidden</div>
</div>
</div>
</div>
</body>
</html>