<!DOCTYPE html> <html> <head> <style> html { overflow: hidden; } body { margin: 0px; } div { height: 100px; width: 100px; } .fixed { position: fixed; } .absolute { position: absolute; } .green { background-color: green; } .red { background-color: red; } .composited { transform: translateZ(0); } </style> <script type="text/javascript"> if (window.testRunner) testRunner.dumpAsTextWithPixelResults(); function moveAbsoluteDiv() { document.getElementById('absoluteDiv').style.top = '700px'; } window.addEventListener('load', moveAbsoluteDiv, false); </script> </head> <body style="height:2000px;"> <!-- You should see 1 green rectangle in the output and no red. --> <div style="top: 200px; left: 100px;" class="fixed red"></div> <div class="composited"><div id="absoluteDiv" style="top: 500px; left:100px;" class="absolute green"></div></div></div> <script> window.scrollTo(0, 500); </script> </body> </html>