perspective-scrolling-4.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html lang="en"

     reftest-async-scroll

     reftest-displayport-x="0" reftest-displayport-y="0"

     reftest-displayport-w="800" reftest-displayport-h="1000"

     reftest-async-scroll-x="0" reftest-async-scroll-y="250">

<meta charset="utf-8">

<title>Perspective scrolling with nested clips</title>

<style>

html {

  padding: 50px 0 3000px;

body {

  margin: 0;

.scrollbox {

  width: 600px;

  height: 500px;

  perspective: 1px;

  overflow: auto;

.transformed {

  will-change: transform;

  width: 200px;

  height: 200px;

  margin: 200px 100px;

  border: 10px solid black;

.spacer {

  height: 4000px;

</style>

<div class="scrollbox"

     reftest-displayport-x="0" reftest-displayport-y="0"

     reftest-displayport-w="600" reftest-displayport-h="2000"

     reftest-async-scroll-x="0" reftest-async-scroll-y="0">

  <div class="transformed"></div>

  <div class="spacer"></div>

</div>