<!DOCTYPE html> <html style="margin: 0; padding: 0; z-index: 0" reftest-async-scroll reftest-async-scroll-y="400"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body style="margin: 0; padding: 0; z-index: 0"> <div style="height: 100vh"> <div style="width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 2"> <div style="position: absolute; width: 100%; height: 100vh; left: 0; top: 0; z-index: 3"> <div style="position: relative; width: 100%; height: 100%; background-image: linear-gradient(lime, blue);"> </div></div></div></div> <div style="height: 100vh; position: relative; background: black;"> <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; clip: rect(0, auto, auto, 0);"> <div style="width: 100%; height: 100%; top: 0; left: 0; position: fixed; transform: translateZ(0); z-index: 3"> <div style="position: relative; width: 100%; height: 100%; background-image: linear-gradient(yellow, red);"> </div></div></div></div> </body></html>