Skip to content

fix: restore scroll progress bar and stop mobile horizontal overflow - #62

Merged
jonathanperis merged 1 commit into
mainfrom
fix/scroll-progress-timeline
Oct 6, 2026
Merged

jonathanperis merged 1 commit into
mainfrom
fix/scroll-progress-timeline

Conversation

@jonathanperis

Copy link
Copy Markdown
Owner

Summary

Found during post-merge verification of #61 on the live site.

  • Scroll progress bar never filled. The CSS minifier (Lightning CSS via Tailwind 4) folded animation + animation-timeline into a single animation: linear both scroll-progress scroll(root) shorthand. Browsers reject a timeline inside the animation shorthand, so the declaration was dropped and animation-name computed to none. Supporting browsers also skip the JS fallback, so the bar stayed at 0. Switching to longhands survives minification.
  • Mobile horizontal scroll (pre-existing). The decorative .scanline bleeds 12% past the hero, making the page 25px wider than a 390px viewport. overflow-x: clip on html, body stops it; clip doesn't create a scroll container, so positioning is unaffected.

Verification (local astro preview in Chromium)

  • Progress bar at 0 / 25 / 50 / 100% scroll: scaleX 0 → 0.25 → 0.50 → ~1.0 (live site before the fix: 0 at every position)
  • 390px viewport: scrollWidth 384 ≤ 390, horizontal scrollX stays 0 (before: 415 and scrollable)
  • bun run lint: 0 errors / 0 warnings / 0 hints; bun run build passes

Noted, not changed

The .section-ruler position: sticky has never taken effect (its Reveal wrapper is exactly the label's height, the same as in the old React version). Left for the upcoming redesign.

🤖 Generated with Claude Code

- Use animation longhands for the scroll-driven progress bar; the CSS
  minifier folded shorthand + animation-timeline into an `animation`
  shorthand containing scroll(), which browsers reject, so the bar never
  filled
- Clip horizontal overflow on html/body so the decorative hero scanline
  no longer makes the page scroll sideways on narrow screens

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 6, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 32 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: jonathanperis/jonathanperis.github.io/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 7c861531-6fcb-4f2e-9c8f-c3584152813b
📥 Commits

Reviewing files that changed from the base of the PR and between 7876390 and 67a23d4.

📒 Files selected for processing (1)
  • src/styles/globals.css
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@jonathanperis
jonathanperis merged commit ca7630a into main Oct 6, 2026
5 checks passed
@jonathanperis
jonathanperis deleted the fix/scroll-progress-timeline branch October 6, 2026 20:43
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