perf: reuse a stationary reading mask during scrolling

Keep native document geometry while translating content behind one viewport fade. Preserve navigation, focus, media preloading, and Static cleanup without changing 3D quality or render resolution.

Validated assets, types, production builds, prerendered artifacts and transfer budgets; compared 64 layouts and checked 87 live interactions plus uncached media and repeated cleanup. High improved from 71.7 to 101.4 FPS at DPR 1 and 47.8 to 62.2 FPS in the full-size DPR 1.5 window, with occasional sub-60 intervals still remaining.
This commit is contained in:
2026-09-05 17:42:19 +03:00
parent d48e9017cc
commit 15bcdf7cec
5 changed files with 324 additions and 185 deletions

View File

@@ -513,3 +513,38 @@
display: none !important;
}
}
/* The outer stage retains the native document height. The viewport owns one
reusable alpha mask; only its content translates when the document scrolls. */
.reading-stage[data-reading-stage='live'] > .reading-viewport {
position: sticky;
top: 0;
overflow: clip;
isolation: isolate;
}
.reading-stage[data-reading-stage='live'] .portfolio-main {
will-change: transform;
}
/* The stationary reading edge supplies the live reveal. View timelines use
layout positions, which no longer follow the translated content here. */
.reading-stage[data-reading-stage='live'] .portfolio-section > h2,
.reading-stage[data-reading-stage='live'] .project-case-study__header {
animation: none;
}
@media print {
.reading-stage,
.reading-viewport {
height: auto !important;
}
.reading-stage[data-reading-stage='live'] > .reading-viewport {
position: static;
overflow: visible;
mask-image: none !important;
}
.reading-stage .portfolio-main {
transform: none !important;
will-change: auto;
}
}