Skip to content

Commit 5322a0d

Browse files
committed
subsystem:doc
This pr fixes the jittery scrolling behavior introduced in nodejs#37301 fix:nodejs#40099 refs:https://infrequently.org/2020/12/resize-resilient-deferred-rendering/
1 parent b0ef080 commit 5322a0d

File tree

1 file changed

+72
-7
lines changed

1 file changed

+72
-7
lines changed

doc/template.html

+72-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width">
@@ -10,6 +11,7 @@
1011
<link rel="stylesheet" href="assets/hljs.css">
1112
<link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html">
1213
</head>
14+
1315
<body class="alt apidoc" id="api-section-__FILENAME__">
1416
<div id="content" class="clearfix">
1517
<div id="column2" class="interior">
@@ -25,15 +27,18 @@
2527
<header>
2628
<div class="header-container">
2729
<h1>Node.js __VERSION__ documentation</h1>
28-
<button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" aria-label="Toggle dark mode/light mode" hidden>
30+
<button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode"
31+
aria-label="Toggle dark mode/light mode" hidden>
2932
<svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
3033
<path fill="none" d="M0 0h24v24H0z" />
31-
<path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>
32-
<path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/>
34+
<path
35+
d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z" />
36+
<path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z" />
3337
</svg>
3438
<svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
3539
<path d="M0 0h24v24H0z" fill="none" />
36-
<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>
40+
<path
41+
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" />
3742
</svg>
3843
</button>
3944
</div>
@@ -77,7 +82,7 @@ <h1>Node.js __VERSION__ documentation</h1>
7782
}
7883
mq.addEventListener('change', mqChangeListener);
7984
if (themeToggleButton) {
80-
themeToggleButton.addEventListener('click', function() {
85+
themeToggleButton.addEventListener('click', function () {
8186
mq.removeEventListener('change', mqChangeListener);
8287
}, { once: true });
8388
}
@@ -90,14 +95,74 @@ <h1>Node.js __VERSION__ documentation</h1>
9095
}
9196
if (themeToggleButton) {
9297
themeToggleButton.hidden = false;
93-
themeToggleButton.addEventListener('click', function() {
98+
themeToggleButton.addEventListener('click', function () {
9499
sessionStorage.setItem(
95100
kCustomPreference,
96101
document.body.classList.toggle('dark-mode')
97102
);
98103
});
99104
}
100105
}
106+
107+
let eqIsh = (a, b, fuzz = 2) => {
108+
return (Math.abs(a - b) <= fuzz);
109+
};
110+
111+
let rectNotEQ = (a, b) => {
112+
return (!eqIsh(a.width, b.width) ||
113+
!eqIsh(a.height, b.height));
114+
};
115+
116+
let spaced = new WeakMap();
117+
118+
let reserveSpace = (el, rect = el.getClientBoundingRect()) => {
119+
let old = spaced.get(el);
120+
if (!old || rectNotEQ(old, rect)) {
121+
spaced.set(el, rect);
122+
el.attributeStyleMap.set(
123+
"contain-intrinsic-size",
124+
`${rect.width}px ${rect.height}px`
125+
);
126+
}
127+
};
128+
129+
let iObs = new IntersectionObserver(
130+
(entries, o) => {
131+
entries.forEach((entry) => {
132+
133+
reserveSpace(entry.target,
134+
entry.boundingClientRect);
135+
});
136+
},
137+
{ rootMargin: "500px 0px 500px 0px" }
138+
);
139+
140+
let rObs = new ResizeObserver(
141+
(entries, o) => {
142+
entries.forEach((entry) => {
143+
reserveSpace(entry.target, entry.contentRect);
144+
});
145+
}
146+
);
147+
148+
let articles =
149+
document.querySelectorAll("#apicontent>section");
150+
151+
articles.forEach((el) => {
152+
iObs.observe(el);
153+
rObs.observe(el);
154+
});
155+
156+
requestAnimationFrame(() => {
157+
requestAnimationFrame(() => {
158+
articles[0].attributeStyleMap.set(
159+
"content-visibility",
160+
"auto"
161+
);
162+
});
163+
});
164+
101165
</script>
102166
</body>
103-
</html>
167+
168+
</html>

0 commit comments

Comments
 (0)