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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user