| <!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> |
