Popover left placement is offset by scrollbar gutter when using scrollbar-gutter: stable

[lixiaoyan]

Provide a general summary of the issue here

Popover positioning is incorrect for left-opening submenus when the document has a classic scrollbar and usePreventScroll applies scrollbar-gutter: stable to the root element.

The issue appears to be a coordinate-space mismatch:

• The submenu popover is absolutely positioned in body, so CSS resolves its right value against the initial containing block (ICB).
• React Aria's positioning calculation uses viewport-related dimensions, including visualViewport.width.
• In Chrome, with scrollbar-gutter: stable on the root element, visualViewport.width / document.documentElement.clientWidth include the scrollbar gutter, while the ICB used by absolute positioning does not match that value.

Related Chromium issue:
https://issues.chromium.org/issues/503187943

🤔 Expected Behavior?

For a left-opening submenu with offset={0}, the submenu should touch the parent menu with no horizontal gap.

😯 Current Behavior

When the document is scrollable and Chrome uses classic/non-overlay scrollbars, opening the menu applies:

html {
  overflow: hidden;
  scrollbar-gutter: stable;
}

After that, the left-opening submenu is shifted horizontally and a gap appears between the parent menu and submenu.

If the document is not scrollable, the issue does not reproduce.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/sgw8huxe?file=src%2FExample.tsx

Version

react-aria-components@1.17.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

@lixiaoyan FYI, I got a fix for it in the pipeline, in case you are working on something simultaneously. In essence it will be

if (isRoot && isStableGutterVisible && isChrome()) {
  let minWidth = this.scrollbarWidth === 'thin' ? THIN_SCROLLBAR_WIDTH : SCROLLBAR_WIDTH;
  let maxWidth = ownerWindow.innerWidth - rootElement.clientWidth;

  return maxWidth || minWidth;
}

where SCROLLBAR_WIDTH or THIN_SCROLLBAR_WIDTH are the platform specific scrollbar sizes calculated like this:

function testUserAgentScrollbarWidth(
  scrollbarWidth: string,
  scrollbarGutter = 'auto',
  isolateStyle = false
): number {
  if (!isDOM() || process.env.NODE_ENV === 'test') {
    return 0;
  }

  let body = document.body || document.documentElement;

  let template = document.createElement('div');
  template.style.border = '0';
  template.style.clip = 'rect(0 0 0 0)';
  template.style.clipPath = 'inset(50%)';
  template.style.height = '1px';
  template.style.margin = '-1px';
  template.style.overflow = 'clip';
  template.style.padding = '0';
  template.style.position = 'absolute';
  template.style.width = '1px';
  template.style.whiteSpace = 'nowrap';
  template.style.top = '-9999px';

  let parent = document.createElement('div');
  parent.style.width = '50px';
  parent.style.height = '50px';
  parent.style.overflow = 'scroll';
  parent.style.border = 'none';
  parent.style.padding = '0';
  parent.style.boxSizing = 'content-box';
  parent.style.scrollbarWidth = scrollbarWidth;
  parent.style.scrollbarGutter = scrollbarGutter;

  if (isolateStyle) {
    template.attachShadow({mode: 'open'}).appendChild(parent);
  } else {
    template.appendChild(parent);
  }

  body.appendChild(template);

  let width = parent.offsetWidth - parent.clientWidth;

  body.removeChild(template);

  return width;
}

This fix will hopefully cover everything apart from custom scrollbar widths on the root element with ::-webkit-scrollbar-*, which is a discouraged attribute anyways. It will auto fallback to the default once the upstream issue is addressed.

We can hopefully close out a bunch of issues related to this problem 👍