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

Closed
opened 2026-03-13 12:51:59 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/better-auth/better-auth/pull/5805
Author: @GautamBytes
Created: 11/6/2025
Status: Merged
Merged: 11/6/2025
Merged by: @Bekacru

Base: canaryHead: fix/toc-anchor-flicker


📝 Commits (3)

  • e80d51c Fix(docs): Prevent TOC thumb flicker on anchor click
  • 1a6682c nitpick
  • f57c048 Merge branch 'canary' into fix/toc-anchor-flicker

📊 Changes

2 files changed (+6 additions, -0 deletions)

View changed files

📝 docs/components/docs/layout/toc-thumb.tsx (+5 -0)
📝 docs/components/docs/layout/toc.tsx (+1 -0)

📄 Description

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.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/better-auth/better-auth/pull/5805 **Author:** [@GautamBytes](https://github.com/GautamBytes) **Created:** 11/6/2025 **Status:** ✅ Merged **Merged:** 11/6/2025 **Merged by:** [@Bekacru](https://github.com/Bekacru) **Base:** `canary` ← **Head:** `fix/toc-anchor-flicker` --- ### 📝 Commits (3) - [`e80d51c`](https://github.com/better-auth/better-auth/commit/e80d51c1e8e48cf858d0fbbe59463ba1785a860f) Fix(docs): Prevent TOC thumb flicker on anchor click - [`1a6682c`](https://github.com/better-auth/better-auth/commit/1a6682cd78ef5e4e15cd4760351fefe68d75b61a) nitpick - [`f57c048`](https://github.com/better-auth/better-auth/commit/f57c048d969e6076d8699c511b2b74ae042cf26b) Merge branch 'canary' into fix/toc-anchor-flicker ### 📊 Changes **2 files changed** (+6 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `docs/components/docs/layout/toc-thumb.tsx` (+5 -0) 📝 `docs/components/docs/layout/toc.tsx` (+1 -0) </details> ### 📄 Description 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. --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-03-13 12:51:59 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#6237