1 <html> 2 3 <body style="height: 10000px"> 4 5 <button id="toggle">Toggle</button> 6 7 <p> 8 The black rectangle starts fixed, and due to a -webkit-transform will be composited. Toggle to unfix it and scroll: the black rectangle should scroll with the page and not overlap the numbers. 9 </p> 10 11 <div id="rect" style="background-color: black; width: 200px; height: 200px; position: fixed; -webkit-transform: translate3d(0,0,0)"> 12 </div> 13 14 1<br> 15 2<br> 16 3<br> 17 4<br> 18 5<br> 19 6<br> 20 7<br> 21 8<br> 22 9<br> 23 10<br> 24 11<br> 25 12<br> 26 13<br> 27 14<br> 28 15<br> 29 16<br> 30 17<br> 31 18<br> 32 19<br> 33 20<br> 34 35 <script> 36 var rect = document.getElementById("rect"); 37 var toggle = document.getElementById("toggle"); 38 39 toggle.addEventListener("click", function (ev) { 40 if (rect.style.position === "fixed") { 41 rect.style.position = ""; 42 } else { 43 rect.style.position = "fixed"; 44 } 45 }); 46 </script> 47
