Skip to content

Fix: Landing page scroll, animation glitch, and scroll-down button#317

Open
Athina09 wants to merge 3 commits intocore-stack-org:developmentfrom
Athina09:development
Open

Fix: Landing page scroll, animation glitch, and scroll-down button#317
Athina09 wants to merge 3 commits intocore-stack-org:developmentfrom
Athina09:development

Conversation

@Athina09
Copy link
Copy Markdown

@Athina09 Athina09 commented Mar 8, 2026

Summary

Fixes scroll and animation glitching on the landing page, keeps the "Know your landscape" section visible below the navbar, and adds a scroll-down button in the bottom-right corner.

Problem

  • Scroll and scroll-snap felt janky (smooth scroll vs snap conflict, backdrop-blur repaints).
  • The first section could sit under the sticky navbar or not show correctly.
  • Layout allowed body scroll and an unclear scroll container.

Solution

  • Scroll container: Single scroll container for main content (flex-1 min-h-0 on <main>) so only that area scrolls and scroll-snap works.
  • Smooth vs snap: Removed scrollBehavior: "smooth" to avoid conflict with scroll-snap.
  • Performance: Replaced section backdrop-blur with bg-white/10 to reduce repaint jank during scroll.
  • Layout: h-screen with <header>, <main>, <footer>; navbar and footer use shrink-0 so "Know your landscape" is fully visible below the navbar.
  • Scroll-down button: Fixed button in the bottom-right corner that smooth-scrolls to the bottom of the page (Lenis when available, native smooth scroll fallback).
  • CSS: Added .landing-scroll-container and .landing-scroll-content (GPU-friendly wrapper, scroll-padding, touch scrolling, trackpad-sync tuning).

Files changed

  • src/pages/LE_homepage.jsx
  • src/index.css

How to verify

  • Open landing page; "Know your landscape" is visible below the navbar.
  • Only the main content scrolls (no double scrollbar).
  • Scrolling feels smooth; sections don't glitch.
  • Scroll-down button (bottom-right) scrolls to the bottom of the page when clicked.

apple added 3 commits March 8, 2026 20:36
…andscape visible

- Make scroll container explicit (flex layout, main scrolls only)
- Use scroll-snap proximity and GPU layer for smoother scroll
- Replace backdrop-blur on sections with bg-white/10 to reduce jank
- Fix layout: h-screen + navbar + footer so first section shows below navbar
- Add landing-scroll-container CSS (scroll-padding, -webkit-overflow-scrolling)
- Semantic structure: header, main, footer with shrink-0 for stable layout

Made-with: Cursor
…l-behavior, scroll-margin

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant