Mitigate Safari auto-scroll w/ media

The prior workaround wasn't working around.
start · Apr 15, 2024 · 4dde72b · 4dde72b
1 parent c96fa9f
commit 4dde72b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/docs/bundle-6cf168691645830fbdd4.js → docs/bundle-77f19fd4dda443149cae.js b/docs/bundle-6cf168691645830fbdd4.js → docs/bundle-77f19fd4dda443149cae.js
diff --git a/docs/index.html b/docs/index.html
@@ -3,9 +3,9 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>What's Up?</title>
+  <title>What’s Up?</title>
   <meta name="description" content="Up is a markup language for writing structured documents in plain text. Up supports tables, revealable content (e.g. spoilers), description lists, and more!" />
-<script type="text/javascript" src="bundle-6cf168691645830fbdd4.js"></script></head>
+<script type="text/javascript" src="bundle-77f19fd4dda443149cae.js"></script></head>
 
 <body>
   <div id="documentation-container">

diff --git a/src/app.js b/src/app.js
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
     configureEditor({
       editorContainerElement,
       documentationContainerElement,
-      documentationScrollerElement: document.body,
+      documentationScrollerElement: document.documentElement,
       documentationElement: getElementById('documentation'),
       tableOfContentsElement: getElementById('table-of-contents')
     })

diff --git a/src/configureEditor.js b/src/configureEditor.js
@@ -139,10 +139,18 @@ function render(
     parseAndRenderWithTableOfContents(markup, upSettings)
 
   // In Safari, if the documentation contains any audio or video players, and if the user
-  // edits markup while the viewport is past the first media player, the viewport automatically
-  // jumps back to the first media player when its HTML is re-rendered.
+  // edits markup while the viewport is scrolled past the first media player, the viewport
+  // automatically scrolls up to the first media player once the documentation is
+  // re-rendered.
   //
-  // To avoid this, we manually restore its `scrollTop` to its pre-render position.
+  // In other browsers, the viewport scrolls similarly, but then it scrolls back down to
+  // where it should be. (This all happens in a blink.)
+  //
+  // To mitigate this Safari behavior, we manually restore the documentation's `scrollTop`
+  // to its pre-render position. Oddly, this doesn't prevent the scrolling entirely!
+  // Instead, this workaround makes Safari behave like other browsers in that the
+  // viewport scrolls up then down in a blink.
+  // TODO: For all browsers, prevent this blinking.
   const { scrollTop } = documentationScrollerElement
 
   documentationElement.innerHTML = documentHtml

diff --git a/src/layout/index.hbs b/src/layout/index.hbs
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>What's Up?</title>
+  <title>What’s Up?</title>
   <meta name="description" content="Up is a markup language for writing structured documents in plain text. Up supports tables, revealable content (e.g. spoilers), description lists, and more!" />
 </head>