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/
saltybuckets · Sep 25, 2021 · 5322a0d · 5322a0d
1 parent b0ef080
commit 5322a0d
Showing 1 changed file with 72 additions and 7 deletions.
diff --git a/doc/template.html b/doc/template.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
@@ -10,6 +11,7 @@
   <link rel="stylesheet" href="assets/hljs.css">
   <link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html">
 </head>
+
 <body class="alt apidoc" id="api-section-__FILENAME__">
   <div id="content" class="clearfix">
     <div id="column2" class="interior">
@@ -25,15 +27,18 @@
       <header>
         <div class="header-container">
           <h1>Node.js __VERSION__ documentation</h1>
-          <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" aria-label="Toggle dark mode/light mode" hidden>
+          <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode"
+            aria-label="Toggle dark mode/light mode" hidden>
             <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
               <path fill="none" d="M0 0h24v24H0z" />
-              <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"/>
-              <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"/>
+              <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" />
+              <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" />
             </svg>
             <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
               <path d="M0 0h24v24H0z" fill="none" />
-              <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"/>
+              <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" />
             </svg>
           </button>
         </div>
@@ -77,7 +82,7 @@ <h1>Node.js __VERSION__ documentation</h1>
           }
           mq.addEventListener('change', mqChangeListener);
           if (themeToggleButton) {
-            themeToggleButton.addEventListener('click', function() {
+            themeToggleButton.addEventListener('click', function () {
               mq.removeEventListener('change', mqChangeListener);
             }, { once: true });
           }
@@ -90,14 +95,74 @@ <h1>Node.js __VERSION__ documentation</h1>
       }
       if (themeToggleButton) {
         themeToggleButton.hidden = false;
-        themeToggleButton.addEventListener('click', function() {
+        themeToggleButton.addEventListener('click', function () {
           sessionStorage.setItem(
             kCustomPreference,
             document.body.classList.toggle('dark-mode')
           );
         });
       }
     }
+
+    let eqIsh = (a, b, fuzz = 2) => {
+      return (Math.abs(a - b) <= fuzz);
+    };
+
+    let rectNotEQ = (a, b) => {
+      return (!eqIsh(a.width, b.width) ||
+        !eqIsh(a.height, b.height));
+    };
+
+    let spaced = new WeakMap();
+
+    let reserveSpace = (el, rect = el.getClientBoundingRect()) => {
+      let old = spaced.get(el);
+      if (!old || rectNotEQ(old, rect)) {
+        spaced.set(el, rect);
+        el.attributeStyleMap.set(
+          "contain-intrinsic-size",
+          `${rect.width}px ${rect.height}px`
+        );
+      }
+    };
+
+    let iObs = new IntersectionObserver(
+      (entries, o) => {
+        entries.forEach((entry) => {
+
+          reserveSpace(entry.target,
+            entry.boundingClientRect);
+        });
+      },
+      { rootMargin: "500px 0px 500px 0px" }
+    );
+
+    let rObs = new ResizeObserver(
+      (entries, o) => {
+        entries.forEach((entry) => {
+          reserveSpace(entry.target, entry.contentRect);
+        });
+      }
+    );
+
+    let articles =
+      document.querySelectorAll("#apicontent>section");
+
+    articles.forEach((el) => {
+      iObs.observe(el);
+      rObs.observe(el);
+    });
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        articles[0].attributeStyleMap.set(
+          "content-visibility",
+          "auto"
+        );
+      });
+    });
+
   </script>
 </body>
-</html>
+
+</html>