Layout shift when accessing search or scrollbar appears

Dannyholt commented 2 years ago

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.

layout-shirt-docusarus

Reproducible demo

https://docusaurus.io/

Steps to reproduce

Visit https://docusaurus.io/
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

facebook / docusaurus