github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-23 23:52:05 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[PR #5805] docs: prevent TOC flicker on anchor link click #14484

New Issue
Closed
opened 2026-04-13 09:29:53 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-13 09:29:53 -05:00
Owner
Copy Link

Original Pull Request: https://github.com/better-auth/better-auth/pull/5805

State: closed
Merged: Yes

What this PR fixes:

This PR resolves issue #5798, where clicking an anchor link in the "On this page" Table of Contents causes the active highlight bar (the "thumb") to flicker or jump.

The Problem:
A race condition existed between two components:

  • anchor-scroll-fix.tsx: This component was initiating a custom smooth-scroll animation and setting a data-anchor-scrolling attribute.
  • toc-thumb.tsx: This component was detecting scroll position changes during the animation and trying to update its position multiple times, causing the visible flicker.

The Solution:

  • toc-thumb.tsx: Updated to check for the data-anchor-scrolling attribute. If it's present, the thumb will "wait" for the animation to finish before updating its position, preventing the flicker.
  • toc.tsx: Added the will-change CSS property to the thumb as a performance optimization to help the browser better handle its animation.

Summary by cubic

Prevents TOC thumb flicker when clicking “On this page” anchor links by pausing updates during smooth scrolling and improving rendering performance.

  • Bug Fixes
    • TocThumb: skip position updates while data-anchor-scrolling is set to avoid race conditions and flicker.
    • TOC: add will-change (height, margin-top) to the thumb for smoother animation.

Written for commit f57c048d96. Summary will update automatically on new commits.

**Original Pull Request:** https://github.com/better-auth/better-auth/pull/5805 **State:** closed **Merged:** Yes --- What this PR fixes: This PR resolves issue #5798, where clicking an anchor link in the "On this page" Table of Contents causes the active highlight bar (the "thumb") to flicker or jump. **The Problem:** A race condition existed between two components: - anchor-scroll-fix.tsx: This component was initiating a custom smooth-scroll animation and setting a data-anchor-scrolling attribute. - toc-thumb.tsx: This component was detecting scroll position changes during the animation and trying to update its position multiple times, causing the visible flicker. **The Solution:** - toc-thumb.tsx: Updated to check for the data-anchor-scrolling attribute. If it's present, the thumb will "wait" for the animation to finish before updating its position, preventing the flicker. - toc.tsx: Added the will-change CSS property to the thumb as a performance optimization to help the browser better handle its animation. <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Prevents TOC thumb flicker when clicking “On this page” anchor links by pausing updates during smooth scrolling and improving rendering performance. - **Bug Fixes** - TocThumb: skip position updates while data-anchor-scrolling is set to avoid race conditions and flicker. - TOC: add will-change (height, margin-top) to the thumb for smoother animation. <sup>Written for commit f57c048d969e6076d8699c511b2b74ae042cf26b. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
GiteaMirror added the pull-request label 2026-04-13 09:29:53 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#14484
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?