| <!DOCTYPE HTML> |
| <style> |
| body { |
| height: 100%; |
| margin: 0; |
| } |
| |
| #container { |
| height: 100vh; |
| overflow-x: hidden; |
| overflow-y: auto; |
| perspective: 200px; |
| perspective-origin: top left; |
| } |
| |
| .scrolled { |
| position: absolute; |
| } |
| |
| #fg { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| left: 100px; |
| top: 100px; |
| /* This causes fg to be separately composited, removing the need for the |
| squashing containment layer. Should have no visible effect. */ |
| will-change: transform; |
| } |
| |
| #bg { |
| transform: translateZ(-100px); |
| background: green; |
| width: 800px; |
| height: 800px; |
| } |
| |
| #tall { |
| width: 10px; |
| height: 8000px; |
| background: white; |
| } |
| </style> |
| <script> |
| if (window.internals) |
| window.internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| </script> |
| <div id="container"> |
| <div class="scrolled" id="bg"></div> |
| <div class="scrolled" id="fg"></div> |
| <div id="tall"></div> |
| </div> |
| |
