<html>

  <body style="height: 10000px">

  <button id="toggle">Toggle</button>

  <p>
  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.
  </p>

  <div id="rect" style="background-color: black; width: 200px; height: 200px; position: fixed; 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>