Skip to content

Layout moves around when switching tabs (scroll position issue) #8625

@Tobbe

Description

@Tobbe

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • 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

Tab groups that are linked causes the page to jump when switching tabs

See this Tape that I recorded
https://s.tape.sh/bjAyxKyo

Maybe this was introduce with this change: #8486
Something about useScrollPositionBlocker() that doesn't work properly anymore.

export function useScrollPositionBlocker(): {

Reproducible demo

https://stackblitz.com/edit/github-k5xct4?file=blog/2021-08-01-mdx-blog-post.mdx

Steps to reproduce

  1. Go to the Blog in the Stackblitz preview pane to the right
  2. Scroll down to the MDX post, it has the tabs example
  3. Switch tabs and see how scroll behaves. Try both the first and the second tab group

Expected behavior

Scroll position should be maintained when switching tabs

Actual behavior

Page layout jumps

Your environment

  • Public source code:
  • Public site URL:
  • Docusaurus version used:
  • Environment name and version (e.g. Chrome 89, Node.js 16.4):
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions