| <html> |
| |
| <body style="height: 10000px"> |
| |
| <button id="toggle">Toggle</button> |
| |
| <p> |
| 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. |
| </p> |
| |
| <div id="rect" style="background-color: black; width: 200px; height: 200px; position: fixed; -webkit-transform: translate3d(0,0,0)"> |
| </div> |
| |
| 1<br> |
| 2<br> |
| 3<br> |
| 4<br> |
| 5<br> |
| 6<br> |
| 7<br> |
| 8<br> |
| 9<br> |
| 10<br> |
| 11<br> |
| 12<br> |
| 13<br> |
| 14<br> |
| 15<br> |
| 16<br> |
| 17<br> |
| 18<br> |
| 19<br> |
| 20<br> |
| |
| <script> |
| var rect = document.getElementById("rect"); |
| var toggle = document.getElementById("toggle"); |
| |
| toggle.addEventListener("click", function (ev) { |
| if (rect.style.position === "fixed") { |
| rect.style.position = ""; |
| } else { |
| rect.style.position = "fixed"; |
| } |
| }); |
| </script> |
