Use opacity instead of hide/show to preserve anchor position (#29673)

pages/_app.tsx

@@ -62,7 +62,10 @@ const MyApp = ({ Component, pageProps }: MyAppProps) => {
             data-color-mode={session?.themeCss?.colorMode || 'auto'}
             data-dark-theme={session?.themeCss?.nightTheme || 'dark'}
             data-light-theme={session?.themeCss?.dayTheme || 'light'}
-            hidden={isLoadingSession}
+            style={
+              /* render a mostly gray background until we know the color mode via XHR */
+              { opacity: isLoadingSession ? 0.1 : 1 }
+            }
           >
             <Component {...pageProps} />
           </div>

stylesheets/index.scss

@@ -14,7 +14,8 @@
 @import "syntax-highlighting.scss";
 @import "utilities.scss";
 
-// render a gray background until we know the color mode via XHR
-html {
+// render a mostly gray background until we know the color mode via XHR
+html,
+body {
   background: #6e7781;
 }