facebook / facebook/docusaurus
Sidebar Navigation Font Style Randomly Changes While Scrolling
- 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.
### 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
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