From 42260f46b55cf1cd63cd4dcb4dbc2eccec2ed49a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Jan 2026 18:27:44 +0000
Subject: [PATCH] fix: resolve iOS toggle indicator sizing on initial page load

Wait for fonts to load and use double requestAnimationFrame before
measuring toggle button dimensions. This ensures layout is complete
before calculating indicator position, fixing the visual glitch on
iOS Safari where the toggle appeared incorrectly sized until toggled.
---
 src/pages/spec/[version]/md.astro | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/pages/spec/[version]/md.astro b/src/pages/spec/[version]/md.astro
index 560003b..a777d6a 100644
--- a/src/pages/spec/[version]/md.astro
+++ b/src/pages/spec/[version]/md.astro
@@ -446,9 +446,24 @@ const previewHtml = await unified()
       }
     }
 
-    // Initialize indicator position on load
-    if (togglePreview) {
-      updateIndicator(togglePreview);
+    // Initialize indicator position after layout is complete
+    // Use double requestAnimationFrame to ensure layout/paint is finished,
+    // which fixes sizing issues on iOS Safari initial page load
+    function initializeIndicator() {
+      if (togglePreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            updateIndicator(togglePreview);
+          });
+        });
+      }
+    }
+
+    // Wait for fonts to load before measuring, then initialize
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(initializeIndicator);
+    } else {
+      initializeIndicator();
     }
 
     // Toggle event listeners