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 141<br> 152<br> 163<br> 174<br> 185<br> 196<br> 207<br> 218<br> 229<br> 2310<br> 2411<br> 2512<br> 2613<br> 2714<br> 2815<br> 2916<br> 3017<br> 3118<br> 3219<br> 3320<br> 34 35<script> 36var rect = document.getElementById("rect"); 37var toggle = document.getElementById("toggle"); 38 39toggle.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