facebook / facebook/docusaurus

Sidebar Navigation Font Style Randomly Changes While Scrolling

Open
#12,429 1 comment 0 reactions 0 assignees View on GitHub
bug status: needs triage
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [x] I'm using the latest version of Docusaurus.
- [x] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).

### Description

While scrolling through a documentation page, the font styling of items in the left sidebar navigation occasionally changes unexpectedly. The issue is observed when scrolling upward from lower sections of the page. Some navigation items temporarily render with a different font weight/style, causing the sidebar appearance to become inconsistent.

After a few seconds, or after additional scrolling, the sidebar styling automatically corrects itself and returns to the expected appearance.

The issue appears intermittently and is not consistently reproducible on every page load.

Image

### Reproducible demo

_No response_

### Steps to reproduce

Open a documentation page with a long left navigation sidebar.
Scroll down through the page content.
Scroll back up toward the top of the page.
Observe the left sidebar navigation items during scrolling.
Occasionally, some sidebar items will render with a different font style/weight than surrounding items.
Wait a few seconds or continue scrolling and observe that the styling returns to normal.

### Expected behavior

The left navigation sidebar should maintain a consistent font family, font size, and font weight during scrolling. Navigation items should not change appearance or flicker while the page is being scrolled.

### Actual behavior

While scrolling upward, some sidebar items temporarily render with inconsistent font styling compared to other items in the same navigation hierarchy. The issue is transient and resolves automatically after a short period, resulting in a noticeable visual flicker and inconsistent user experience.

Observed behavior:

Occurs randomly during scrolling.
More noticeable when scrolling from lower sections toward the top.
Sidebar styling self-corrects after a few seconds.
No console errors observed.
Appears to be related to sidebar rendering or state updates during scroll events.

### Your environment

_No response_

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Research direction

No source file, test, or entry point is identified in the report. Start by reproducing the issue on a Docusaurus documentation page with a long sidebar while scrolling down and back up, then trace the sidebar rendering or scroll-related updates. Done means sidebar items keep consistent font family, size, and weight without transient flicker.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.