react-spectrum: React Aria's usePreventScroll hook causes whitespace shown on desktops from padding-right on html element

🐛 Bug Report

When the usePreventScroll hook is used on a non-mobile device (with a scrollbar), a strip of whitespace shows up. This happens when a element with a 100% width and height is added to the DOM.

The problem is caused by the padding-right that’s added to the html element.

🤔 Expected Behavior

The whitespace should not be visible on the right side of the page.

😯 Current Behavior

The padding-right shows up at the right side of the page.

💁 Possible Solution

The body element styled should get overflow: hidden assigned. Also possible to give the body element the same background color as the fullscreen container, which is not optimal.

🔦 Context

See the right side of the page, used in a new Next.js application.

💻 Code Sample

See the Github Gist here.

🌍 Your Environment

Software	Version(s)
react-aria	3.1.0
Browser	Google Chrome
Operating System	Windows 10 64bit

🧢 Your Company/Team

🕷 Tracking Issue (optional)

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 2
Comments: 15 (5 by maintainers)

Most upvoted comments

Any updates on this issue? It seems to still be a current thing

JeromeTrottier on Jun 2, 2023

react-spectrum still making progress? the best solution has already been provided above with compensation, but it’s been a year

xkomiks on Jul 28, 2023

I think the best way to solve this issue is following steps

Instead of inline styles to html element add custom className compensate-for-scrollbar
Add this className to body element when isActive, AND generate styles for this className

<style>
:root {
 --scrollbar-width: 15px; // dynamic value generated here
}
.compensate-for-scrollbar {
    padding-right: var(--scrollbar-width);
}
body.compensate-for-scrollbar {
    overflow: hidden !important;
    touch-action: none;
}
</style>

When is not active - nothing.

For fix jump for fixed elements like headers, users can use the same className on this elements to allow scrollbar-padding-fix be applied. Important note: for fullwidth fixed elements instead of width: 100% use left: 0; right:0 to work correctly with padding compensation.

This technique is well known and used in multiple popular libraries like fancybox.

At this moment I don’t have any solution to do the same thing with usePreventScroll as I described to achieve the same result. I know this hook as a whole aria library is not related to styling, but I think this is a good step towards users.

7iomka on Feb 10, 2022

@pascalduez we’ll need to find some other way than a callback for usePreventScroll, that’d potentially require listening to every dialog etc that makes use of usePreventScroll, in a large shared code base, this could be untenable. We don’t have another idea at this time, so all ideas are welcome.

snowystinger on May 11, 2021