| terry@google.com | 256453d | 2015-12-18 17:55:16 | [diff] [blame] | 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 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; transform: translate3d(0,0,0)"> |
| 12 | </div> |
| 13 | |
| 14 | 1<br> |
| 15 | 2<br> |
| 16 | 3<br> |
| 17 | 4<br> |
| 18 | 5<br> |
| 19 | 6<br> |
| 20 | 7<br> |
| 21 | 8<br> |
| 22 | 9<br> |
| 23 | 10<br> |
| 24 | 11<br> |
| 25 | 12<br> |
| 26 | 13<br> |
| 27 | 14<br> |
| 28 | 15<br> |
| 29 | 16<br> |
| 30 | 17<br> |
| 31 | 18<br> |
| 32 | 19<br> |
| 33 | 20<br> |
| 34 | |
| 35 | <script> |
| 36 | var rect = document.getElementById("rect"); |
| 37 | var toggle = document.getElementById("toggle"); |
| 38 | |
| 39 | toggle.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> |
