Safari Fixed > Overflow > Relative Scroll Bug

Safari Fixed / Overflow Hidden Scroll Bug

#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; }

When you scroll this page the following objects will be clipped:

• (relative objects and overflowHidden objects) inside (overflowHidden objects) inside (fixed objects) will be clipped;

• (relative objects and overflowHidden objects and absolute objects) inside (fixed/overflowHidden objects) will be clipped;

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.

#fixed1 no style

.relative

.absolute

.overflowHidden no style

.overflowHidden .relative

.overflowHidden .overflowHidden

#fixed2.overflowHidden no style

.relative

.absolute

.overflowHidden no style

.overflowHidden .relative

.overflowHidden .overflowHidden

#fixed3 .overflowHidden no style

.relative

.absolute

.overflowHidden no style

.overflowHidden .relative

.overflowHidden .overflowHidden