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