<!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 &gt; Overflow &gt; 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>