React Aria Components - Popover & Scrollbar Gutter

[rshackleton]

Provide a general summary of the issue here

When a popover is opened with isNonModal={false} the html element has padding added to handle the scrollbar disappearing. However, there is the new CSS property scrollbar-gutter: stable which handles this automatically. These conflict and cause the page contents to jump due to the additional padding.

🤔 Expected Behavior?

The page content shouldn't jump when a popover is opened with scollbar-gutter: stable applied to the html element.

😯 Current Behavior

The page content jumps when a popover is opened with scollbar-gutter: stable applied to the html element.

💁 Possible Solution

I see two options:

1. Add a new option to opt-out of the automatic padding.
2. Update to apply scrollbar-gutter: stable instead of the padding.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/funny-water-5tdptj

Version

"react-aria-components": "1.0.0-rc.0"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 12.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like Safari doesn't support it yet https://caniuse.com/mdn-css_properties_scrollbar-gutter

Possibly dupe https://github.com/adobe/react-spectrum/issues/1216

[reidbarber]

Webkit bug link: https://bugs.webkit.org/show_bug.cgi?id=167335

[mutewinter]

https://github.com/adobe/react-spectrum/assets/305901/43a05a74-e2b6-4fc9-bd07-c78e13c7ce47

Here's a video of what this looks like in Safari 17.2.1 on macOS with "react-aria-components": "1.0.1",.

[sleonia]

@mutewinter @snowystinger @reidbarber @rshackleton @kamal Hi. I've discovered a workaround for this issue. It involves adding extra padding to the body, which helps to prevent shifts in the layout

// somewhere in the html template
const scrollbarVisible = (element: HTMLElement) => {
  return element.scrollHeight > element.clientHeight;
};

const observer = new MutationObserver((mutations) => {
  if (mutations[0].type === "attributes") {
    if (scrollbarVisible(document.documentElement)) {
      document.body.style.paddingRight =
        document.documentElement.style.paddingRight;
    } else {
      document.documentElement.style.paddingRight = "0";
    }
  }
});

observer.observe(document.documentElement, {
  attributes: true, // This tells the observer to watch for changes in attributes
  attributeFilter: ["style"],
  subtree: false,
  attributeOldValue: false,
});

[denisorehovsky]

Any update on this?

https://github.com/adobe/react-spectrum/assets/9641784/1f0dc48e-1d38-4b4b-bdc8-7301eead65b1

Chrome works perfectly fine. Only Safari has problems.

[MantvidasMiskinis]

Hey, I am using usePopover from react-aria. Scroll is always visible on my PC browser. After opening popover, scroll disappears and it causes page content resizing. Its can be reproduced on the documentation page https://react-spectrum.adobe.com/react-aria/usePopover.html - just need to click Open Popover button and have your browser scroll always visible. I am using mac with chrome but its can be reproduced on windows too.

[bunkscene]

Looks like Safari doesn't support it yet https://caniuse.com/mdn-css_properties_scrollbar-gutter

Possibly dupe #1216

I'm not sure if Safari will ever support this. Do they float the scrollbar on scroll only? If so, the gutter has no purpose.