<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Position fixed with transform clipping</title> <style type="text/css" media="screen"> body { height: 2000px; margin: 0; } .container { position: fixed; width: 400px; height: 50px; border: 2px solid black; overflow: hidden; } .box { width: 100%; height: 100%; background-color: green; transform: translate(0, 0); } p { position: absolute; top: 100px; } </style> <script type="text/javascript" charset="utf-8"> window.addEventListener('load', function() { window.scrollBy(0, 25); }, false); </script> </head> <body> <p><a href="https://bugs.webkit.org/show_bug.cgi?id=29346">https://bugs.webkit.org/show_bug.cgi?id=29346</a><br> Green box should fill the black border.</p> <div class="container"> <div class="box"> </div> </div> </body> </html>