Repository navigation
Sidebar Navigation Font Style Randomly Changes While Scrolling #12429
Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I'm using the latest version of Docusaurus.
- I have tried the
npm run clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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.
Activity
AbarnaaSree commentedon Sep 12, 2026
I’d like to investigate this issue.
The intermittent font-style change during scroll sounds potentially related to sidebar re-rendering, active-item state updates, or CSS/layout changes triggered by scroll/visibility detection.
I can look into the sidebar rendering and scroll-related logic, identify the cause of the transient font-weight/style change, and submit a fix with a regression test if the issue is reproducible.
UdaySharmaGitHub commentedon Sep 20, 2026
hi @vinothkumarGanesan i think issue is already resolved because what i check that the Everthing is Prefectly Fine and rendering is working good in the code , I think their might some network issue from your side.
But i think you can close this issue
before closing this issue please first assign to me and then close it
Ok
fulluhere commentedon Sep 23, 2026
#12429
Jashvanthan commentedon Sep 29, 2026
Hi maintainers,
I’d like to investigate this issue and contribute a fix if possible.
I understand that the sidebar text styling can change unexpectedly during scrolling. Before implementing a change, I’d like to reproduce the behavior and identify whether the cause is related to CSS styles, the active-sidebar-item state, or the scroll/route handling logic.
If I can reproduce it consistently, I’ll prepare a focused fix together with a regression test or appropriate visual regression coverage.
Could you please confirm whether this issue is still open for contributors?
Thanks!
BhavishTrehan77 commentedon Oct 7, 2026
Hi! I’d like to work on this issue. I’ve gone through the description and would like to investigate the sidebar rendering/flickering behavior and work on a fix.
Could you please assign this issue to me?
Tejas-V-P commentedon Oct 9, 2026
Hi maintainers! I'd love to take a crack at this issue.
Since the bug involves transient font-weight flickering during upward scrolls, I plan to investigate how the active-item state and CSS classes are applied in the sidebar's React components. My initial approach is to look into the scroll-visibility detection (such as Intersection Observers or scroll event listeners) and trace any potential re-rendering bottlenecks causing a delay in state updates.
I will start by reproducing the flicker locally on a long documentation page. Please let me know if it's okay to assign this to me, and I'll gladly prepare a PR with a fix!
sowmyasathyapriyas134-ctrl commentedon Oct 21, 2026
Hi @vinothkumarGanesan and maintainers, (AI-assisted)
I have been investigating this issue and attempted to reproduce the sidebar font-style/weight flicker during scrolling.
My local environment uses Windows 11, Google Chrome 155.0.8059.85 (64-bit), a 1920 × 1200 display resolution, 125% display scaling, and enabled graphics acceleration. In my automated Chromium testing, I tested repeated upward and downward scrolling on long documentation pages with the announcement bar both enabled and dismissed. I could not reproduce the reported flickering.
The theme-classic tests and style lint checks also passed. However, the root cause remains unknown, and I have not identified a verified fix.
Could you please share:
It would also help to know whether this occurs on the standard Docusaurus site or a customized documentation site.
Thank you!
Danish2404 commentedon Oct 27, 2026
Hi maintainers! I’d like to investigate this issue and contribute a fix. Could you please let me know if I can work on it?
kishanrajagopal10-bit commentedon Oct 29, 2026
Hi maintainers! I'd love to take a crack at this issue. Since the bug involves transient font-weight flickering during upward scrolls, I plan to investigate how the active-item state and CSS classes are applied in the sidebar's React components. My initial approach is to look into the scroll-visibility detection and trace any potential re-rendering bottlenecks. Could you please assign this issue to me? Thanks!