[dialog] Incorrect scroll-lock style calculation

[KingSora]

Bug report

Currently when opening a modal in Chrome on Android the bottom part of the screen is being cut-off due to an incorrect calculation of the height property. This is only happening if the top navigation / URL bar of the browser is hidden because the user scrolled down.

Current behavior

2025-06-17.10-27-13.mp4

In the video notice the bottom part of the page, its being cut-off when a dialog is open. The reason for that is the height: calc(-57px + 100dvh) style on the body element.

Expected behavior

The height and width of the body element should remain visually unchanged.

Reproducible example

https://base-ui.com/react/components/dialog

Base UI version

1.0.0-beta.0

Which browser are you using?

Chrome on Android

Which OS are you using?

Android

Additional context

Taking a look at the code this bug seems to be related to this line:

base-ui/packages/react/src/utils/useScrollLock.ts

Line 87 in d07961b

const scrollbarHeight = Math.max(0, win.innerHeight - html.clientHeight);

where the scrollbarHeight is being calculated as:

const scrollbarHeight = Math.max(0, win.innerHeight - html.clientHeight);

[atomiks]

@KingSora Checking html.scrollWidth > html.clientWidth should perhaps fix this: #2123

[KingSora]

@atomiks Thanks for looking into this so quickly! :)

The fix seems to fix this issue, but isn't there a way to fix this bug "more reliably" (without sniffing the os / browser)?

Something like this should work:

const getWindowScrollbarSize = () => {
  const div = document.createElement('div');
  div.style = `position: fixed; inset: 0; contain: strict`;

  document.body.append(div);

  const originalGutter = document.body.style.scrollbarGutter;
  const originalX = document.body.style.overflowX;
  const originalY = document.body.style.overflowY;
  
  document.body.style.scrollbarGutter = 'auto';
  document.body.style.overflowX = 'scroll';
  document.body.style.overflowY = 'scroll';

  const scrollW = div.clientWidth;
  const scrollH = div.clientHeight;

  document.body.style.overflowX = 'hidden';
  document.body.style.overflowY = 'hidden';

  const hiddenW = div.clientWidth;
  const hiddenH = div.clientHeight;

  document.body.style.scrollbarGutter = originalGutter;
  document.body.style.overflowX = originalX;
  document.body.style.overflowY = originalY;

  div.remove();
    
  return {
      width: Math.max(0, Math.abs(hiddenW - scrollW)),
      height: Math.max(0, Math.abs(hiddenH - scrollH)),
  }
}

I'm aware that adding and removing a "measuring div" is a little bit more expensive, but this operation should only be run once and cached forever, assuming that scrollbar width changes are very rare and certainly a big edge case.

This combined with the isScrollableX and isScrollableY variables should always yield the correct values without the need of sniffing the OS or Devices type.

[atomiks]

@KingSora in the case of the Android check, it's just to handle the horizontally scrolling edge case specifically (probably quite rare). We do UA sniff in various other places already

The element measurement technique is possible, but it can be harmful to performance

[KingSora]

Just to clarify, I'm not against the UA sniff at all, I'm just pointing out that in theory other browsers on other platforms could behave in the same way and the fix in your PR would not catch them because the fix is only working for android devices.