Repository navigation
fix(home-new): fix mobile hero stall, drop redundant logo/scroll cue - #521
Merged
Merged
Conversation
The mobile hero overlay showed a logo and bouncing "Scroll down" hint, both fading in on a fixed 1-1.3s animation-delay decoupled from the hero image's actual load state — this read as a stall even on a fast connection. The logo was also a leftover from before the navbar was always-visible (it used to be the only branding shown before scroll). Both are replaced with the headline + primary CTA directly on the hero image, matching desktop's hero-card hierarchy, with a much shorter mobile-only animation delay.
Deploying website with
|
| Latest commit: |
27e7fbf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1d0b4968.website-aun.pages.dev |
| Branch Preview URL: | https://fix-home-new-mobile-hero-sta.website-aun.pages.dev |
iframe.qgiv-embed had a height: 800px !important rule, which permanently overrides Qgiv's own postMessage-driven resize (the same mechanism ValidAid uses, fixed correctly in #520 without !important). Once a visitor advances past whatever fits in 800px, the rest of the form becomes invisible and unreachable with no scrollbar exposed. Plausible data backs this up: /donate-new visitors average 3s on page and lifetime donations completed via that page is 1, versus 148s and 140+ on the old /donate. Also added the missing data-lenis-prevent on the Qgiv containers to match the convention already used for the ValidAid iframe and every other embedded widget on Lenis-scrolled pages.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Mobile hero stall (
/home-new)animation-delaydecoupled from the hero image's actual load state — this read as a stall/dead-air even on a fast connection with the image already painted.alwaysVisible(fix(home-new): show nav bar immediately instead of after scroll #519) — it used to be the only branding shown pre-scroll; now the navbar shows the logo from the first frame, making the hero's copy redundant..hero-cardglass panel), with a short mobile-only animation delay (.hero-mobile-fast) instead of the desktop-length stagger. The secondary "See what we've built" link stays as the first thing below the fold.scroll-indicator/scrollBounceCSS (base rule, keyframes,no-jsandreduced-motionoverrides).Qgiv donation form clipped mid-flow (
/donate-new)iframe.qgiv-embedhad aheight: 800px !importantrule, which permanently overrides Qgiv's own postMessage-driven resize (the same mechanism ValidAid uses, fixed correctly in fix(donate-new): give ValidAid iframe a default height #520 without!important). Once a visitor advances past whatever fits in 800px, the rest of the form becomes invisible and unreachable, with no scrollbar exposed./donate-newvisitors average 3s on page and 1 lifetime completed donation via that page, vs 148s and 140+ on the old/donate.data-lenis-preventon the Qgiv containers, matching the convention already used for the ValidAid iframe and every other embedded widget on Lenis-scrolled pages.Test plan
/home-newon a mobile viewport (< 810px): confirm headline + primary CTA appear promptly on the hero image, no logo/scroll-down artifact, no dead-air pop-inprefers-reduced-motionstill shows everything at rest immediately#portfolio/donate-new, step through the full Qgiv flow (amount → details → payment → confirmation) on both desktop and mobile and confirm nothing is clipped/unreachable once the iframe needs to grow past 800px/donate-newstill renders and resizes correctly