167 lines
3.5 KiB
HTML
167 lines
3.5 KiB
HTML
<!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> |