The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.page {
position: absolute;
background-color: red;
width: 90vw;
height: 90vh;
overflow-y: scroll;
}
#content {
width: 100%;
height: 200vh;
background-color: green;
}
</style>
</head>
<body>
<div style="width: 1440px; height: 820px; perspective: 989.827561px;">
<div style="transform-style: preserve-3d; width: 1440px; height: 820px; transform: translateZ(989.827561px) matrix3d(0.599134, 0.00687, 0.800619, 0, -0.004679, -0.999916, 0.012081, 0, -0.800635, 0.010985, 0.599052, 0, -33.888354, 168.546007, 72.503973, 1) translate(720px, 410px);">
<div class="page track0" style="transform: translate(-50%, -50%) matrix3d(0.032176, 0, -0.042115, 0, 0.000519, -0.052996, 0.000396, 0, 0.042112, 0.000653, 0.032173, 0, -94.514369, 166.635279, -114.904453, 1);"><div id="content"></div></div>
</div>
</div>
</body>
</html>
It appears that the problem lies in the transformations (removing them resolves the issue). The reasoning behind this behavior is unclear to me. While the transformation values may seem arbitrary, they should be adaptable for any values. It's crucial to maintain the structure unchanged, as this is a snippet generated by the library I'm utilizing (three.js, CSS3DObject).