remove-fixed-position-but-keep-compositing.html 851 B

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