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