Fix layout shift caused by redundant styles

monochromer commented 5 days ago

Description

Initially, @shoaibkh4n noticed that when opening and closing the drop-down list on the page https://nodejs.org/en/download layout-shift occurs and suggested a solution – add scrollbar-gutter: stable;.

This really helped, but it led to an empty space on other pages equal to the size of the scrollbar (by the way, this happens only in SPA mode). @daklay noticed this and suggested setting scrollbar-gutter: auto, but this is unnecessary, since it is the default value.

In fact, Radix UI Dropdown Menu is already solving this problem, but it was prevented by the thoughtless assignment of such styles:

html,
body {
  width: 100%;
}

There is a difference between width: 100% and width: auto. Therefore, you just need to delete these styles.

Validation

After this changes no layout shift and empty spaces on other pages:

https://github.com/nodejs/nodejs.org/assets/6412192/686f2825-87e4-47e9-a586-a9df982abd61

Related Issues

Check List

[x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
[x] I have run npm run format to ensure the code follows the style guide.
[x] I have run npm run test to check if all tests are passing.
[x] I have run npx turbo build to check if the website builds without errors.
[x] I've covered new added functionality with unit tests if necessary.

vercel[bot] commented 5 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 27, 2024 10:57am

shoaibkh4n commented 4 days ago

I think its a great suggestion, scrollbar-gutter: stable actually caused the issue on empty space on all pages thanks @monochromer for noticing this, LGTM 🔥👍,

ovflowd commented 4 days ago

Im pretty sure we added scrollbar-gutter and then removed for some reasons...

@canerakdas any insights here? 🤔

canerakdas commented 4 days ago

Im pretty sure we added scrollbar-gutter and then removed for some reasons...

@canerakdas any insights here? 🤔

We removed it in this PR because it looks better and did not create a layout shift

What I don't understand is that I couldn't find this fix in the Radix primitives changelog :thinking:

ovflowd commented 3 days ago

What I don't understand is that I couldn't find this fix in the Radix primitives changelog 🤔

Not sure I got your comment, are you saying a recent change on the Primitives created such layout shift?

canerakdas commented 3 days ago

Not sure I got your comment, are you saying a recent change on the Primitives created such layout shift?

I mean I think the recent changes fixed the layout shift. Even though I reverted all changes, I couldn't reproduce the layout shift issue 🤷‍♂️

monochromer commented 1 day ago

Most likely, Radix Dropdown has a solution to eliminate layout shift from the very beginning. But the styles html, body { width: 100%; } prevent it from working correctly. And any scrollbar-gutter setting in this case is simply superfluous.

nodejs / nodejs.org