v0.2.90

static/js/markdown.js

@@ -420,11 +420,12 @@ export function alignPreviewLineNumbers(root) {
   const styles = getComputedStyle(root);
   const targetLeft = parseFloat(styles.paddingLeft || "0") - 50;
   const rootLeft = root.getBoundingClientRect().left;
+  const positions = [];
+  // Finish all geometry reads before writing CSS properties. Interleaved
+  // reads and writes force a full layout for each source line in Chromium.
   root.querySelectorAll(".preview-source-line").forEach(line => {
     const lineRect = line.getBoundingClientRect();
     const lineLeft = lineRect.left - rootLeft + root.scrollLeft;
-    line.style.setProperty("--preview-line-left", `${targetLeft - lineLeft}px`);
-
     const textRect = firstRenderedTextRect(line);
     const lineStyles = getComputedStyle(line);
     const gutterStyles = getComputedStyle(line, "::before");
@@ -432,9 +433,16 @@ export function alignPreviewLineNumbers(root) {
     const textLineHeight = textRect?.height || 0;
     const borderTop = parseFloat(lineStyles.borderTopWidth) || 0;
     const textTop = textRect ? textRect.top - lineRect.top - borderTop : 0;
-    const gutterTop = Math.max(0, textTop + (textLineHeight - gutterLineHeight) / 2);
-    line.style.setProperty("--preview-line-top", `${gutterTop}px`);
+    positions.push({
+      line,
+      left: `${targetLeft - lineLeft}px`,
+      top: `${Math.max(0, textTop + (textLineHeight - gutterLineHeight) / 2)}px`,
+    });
   });
+  for (const position of positions) {
+    position.line.style.setProperty("--preview-line-left", position.left);
+    position.line.style.setProperty("--preview-line-top", position.top);
+  }
 }
 
 function stripFenceIndent(line, columns) {