diff --git a/src/scripts/Portfolio.ts b/src/scripts/Portfolio.ts index ed132a6..7c94da3 100644 --- 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 index 5c757c7..c870c19 100644 --- 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 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);