<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>