scrollBehavior: "smooth" causes unintentional scroll on dialog open/close.

[1Ghasthunter1]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.7.8

What browser are you using?

Chrome, Safari on iOS

Reproduction URL

Issue repo
To run, simply clone the repo and run npm i and npm run dev in the root directory.

Describe your issue

To reproduce, simply navigate to the nextjs server in your browser on an iOS device and press the Open Modal button at the bottom of the page. The body element should scroll up, and then jump in a weird manner on the way down.

I've done some investigation, and it seems what's happening is the scrollBehavior: smooth attribute on the Html element is interfering with how headlessui handles the open modal affecting the iOS scroll position. It seems that on iOS, when the modal is opened, the scroll position resets to 0, and headlessui applies a top margin to the body to maintain the content's scrolled position on the page.

This normally works, but with scrollBehavior: smooth active, the top margin calculation is no longer correct and we see this scroll "jumping" behavior when the modal opens.

[sepkamal]

We are encountering this issue as well

[sepkamal]

Investigated a bit more and we were able to resolve this issue by reverting to version 1.7.0. Obviously not an ideal solution but it worked for us. This issue was introduced in version 1.7.1, I believe due to #1830

@RobinMalfait Here is a recording of the issue as well in case it's helpful. As you can see, opening and closing the dialog causes unintentional scrolling of the page in the background. This only occurs on iOS.

Recording.2023-07-07.205023.mp4

Cheers!

[romankoho]

interestingly downgrading to 1.7.0 does not fix the issue in our case

[1Ghasthunter1]

Thank you guys for confirming, just would like to bump this.

[nenuadrian]

Got the exact same problem

[nenuadrian]

You can hack it with this:

.cdk-global-scrollblock {
position:initial;
width: 100%;
overflow-y: hidden;
scroll-behavior: unset;
overflow-x: hidden;
}

Main issue is it makes it position fixed then scroll to that location it was at

[romankoho]

@nenuadrian can you please elaborate on that? I added this class in my main css (working with Tailwind css) but it still occurs. Do I have to set this class dynamically when opening a dialog?

[gmcamposano]

Same here.
I already made a #2627 regarding this. I also have a video with the same issue.

[karinfdez]

I got the exact same issue when I upgraded the headlessui version from 1.4.2 to 1.7.15.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #2635, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

Here is an example video with the fix in place for the given reproduction repo:

RPReplay_Final1690990993.mp4

[efeguerrero]

Great News! Was just having this bug on iOS.
If anyone needs and urgent fix just disable smooth scroll when menu opens and enable it when it closes.

[badalsaibo]

It was happening on Chrome too for us. I had to manually add this below code in Vue3

// this prevents the headless modal from scrolling
watch(
  () => props.visible,
  (newVisible) => {
    if (newVisible) {
      document.documentElement.style.scrollBehavior = 'unset';
    } else {
      document.documentElement.style.scrollBehavior = 'auto';
    }
  }
);

[nyash04]

@headlessui/react: ^1.7.17 I'm still facing this issue.