Layout shift when accessing search or scrollbar appears

[Dannyholt]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] 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

When you click the search bar to open the modal there is a slight layout shift on the doc content.

Reproducible demo

https://docusaurus.io/

Steps to reproduce

1. Visit https://docusaurus.io/
2. Click search and see the layout shift.

Expected behavior

No layout shift.

Actual behavior

N/A

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.

[Josh-Cena]

You didn't pinch-zoom the screen, did you? The page looks normal on my end. Could you give your browser version, screen size, etc.?

[slorber]

This is due to the scrollbar offset (like docs sidebar reported here https://github.com/facebook/docusaurus/issues/5254, with PR fix https://github.com/facebook/docusaurus/pull/7134).

As scrollbar-gutter CSS support increases, we can try to find a way to fix this.

Unfortunately, it's not so easy for the main layout because we can't apply the gutter randomly on the top-level element or it produces a weird UX:

(not very visible here but there's a weird dark offset where the scrollbar should be)

It has to be applied to all layout elements independently, somehow like this:

body.DocSearch--active .main-wrapper {
  overflow: hidden;
  scrollbar-gutter: stable;
}

Problem for docs: usage of overflow seems required for the gutter to work, and this creates a stacking context which messes up with sidebar/toc positions (using sticky position)

[elludraon]

FYI, this is how it's handled in react-bootstrap (react-overlays & dom-helpers) which seems to work on most platforms:

• https://github.com/react-bootstrap/dom-helpers/blob/b70c63e914dcbeecaf17f24bc00805b84ea51e93/src/scrollbarSize.ts
• https://github.com/react-bootstrap/react-overlays/blob/adb4fe2882737dd2651fc498a54fea9142e9346f/src/ModalManager.ts#L70-L89