✨ [Page] Bring back scroll snapping but properly this time

beefchimi · Jul 26, 2024 · 8c05abd · 8c05abd
1 parent a8d033d
commit 8c05abd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/src/scripts/Portfolio.ts b/src/scripts/Portfolio.ts
@@ -25,6 +25,12 @@ export class Portfolio {
 
   #isTicking = false;
 
+  // TODO: There is a bug in Firefox Mobile that causes the "URL bar" to
+  // re-appear everytime the url is updated (ex: via replaceState). I am
+  // simply disabling this behaviour for now... but I may need to do a
+  // user-agent sniff in order to work around it.
+  static SUPPORT_URL_UPDATES = false;
+
   constructor(selectors?: Selectors) {
     this.#selector = {
       cssColorProp: selectors?.cssColorProp || CSS_PORTFOLIO_COLOR_PROP,
@@ -111,6 +117,8 @@ export class Portfolio {
   }
 
   #updateUrlHash() {
+    if (!Portfolio.SUPPORT_URL_UPDATES) return;
+
     const urlHash = this.#index === 0 ? ' ' : `#${sections[this.#index].id}`;
 
     // Passing an empty `string` as `urlHash` will NOT remove any previous `hash`,

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -88,34 +88,37 @@ body {
 }
 
 /* --- Smooth scroll + snapping --- */
-/* Disabled because it breaks "dynamic chrome" behaviour on iOS */
 
-/*
-html,
-body {
-  height: 100svh;
-  overflow: hidden;
-}
+html {
+  /*
+    It is possible that Safari may require this to be
+    added to the <body /> as well.
+  */
+  scroll-snap-type: y mandatory;
 
-main {
-  height: 100svh;
-  overflow: scroll;
-  scroll-snap-points-y: repeat(100svh);
-  scroll-snap-type: y proximity;
-  scroll-behavior: smooth;
+  /*
+    Ideally, we use `proximity` everywhere...
+    but iOS scrolling just feels janky when `proximity` is used.
+  */
+  @media (--min-tablet) {
+    scroll-snap-type: y proximity;
+  }
 }
 
 .section {
-  position: relative;
   scroll-snap-align: start;
 }
-*/
 
 /* --- Components --- */
 
 .section {
   width: 100dvw;
-  height: 100svh;
+  /*
+    `lvh` appears to behave differently between various Mobile browsers...
+    but the intention is to always use the "largest viewport height".
+    Using a "dynamic" height leads to a lot of scroll jank.
+  */
+  height: 100lvh;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -126,17 +129,6 @@ main {
   overflow: hidden;
 }
 
-/*
-  TODO: Experiment with this when Safari has better support.
-  At the moment, the site in "web app view" does not stretch
-  the full height of the viewport (likely because of `svh`).
-*/
-/*
-.section:fullscreen {
-  height: 100dvh;
-}
-*/
-
 .section-interior {
   display: grid;
   gap: var(--space-looser);