Vue Dialog jumps on click, body with margin-top

[chrisjansky]

Hi, I have an issue with Dialog on iOS screens.

For some reason gets negative margin-top on Dialog open, making the page jump erratically. To make matters worse, the page doesn‘t return to the same position when Dialog is closed, resulting in terrible UX. Please see video.

Anyone experienced the same problem? 🙏

Screen.Recording.2023-03-21.at.15.37.27.mov

[rinates]

I'm stuck with the same issue. Have you solved this one?

[chrisjansky]

@rinates No, I haven‘t solved it, I ended up changing the design (= not using ) so this doesn’t happen. Let me know if you have any luck 🙏

[judewang]

I met the same issue and found the source code. https://github.com/tailwindlabs/headlessui/blob/0276231c31/packages/%40headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts#L27-L28

Here we suppose if executing window.scrollTo(0,0) will let window.pageYOffset become 0, but it has never happen on my iPhone. The window.pageYOffset remained the same value even after window.scrollTo(0,0), so the scrolling value kept getting doubling after closing the Dialog.

[thecrypticace]

Hey! We've done a bunch of testing of this on iOS in the past — especially after a recent refactor _ and it seems to work from our testing. Can you provide a few things:

1. What iOS version you are having the issue with
2. Which browser on iOS (I know they're all technically webkit but it can still make a difference)
3. If it's Safari, what tab bar you are using (bottom tab bar vs top tab bar — there are differences in behavior in Safari between the two modes unfortunately)
4. Some kind of a reproduction that we can test with — even if it's not 100% minimal.

[robinsimonklein]

Hi there !

After some investigation, I noticed that this behavior came from the fact that I added scroll-behavior: smooth to my html element in CSS. I'm not sure, but it seems to me that I've already observed that some devices apply smooth scrolling by default on root.

I found a workaround that works for me: it consists in forcing the scroll-behavior to auto while the modal is open. Then return to normal when the modal is closed (we need to use vue's nextTick to keep scroll-behavior: auto at the exact moment the modal closes.

Tested on Safari on iOS 16, Chrome on iOS 16 but not on Android. It doesn't seem to have any side effects on desktop.

@thecrypticace, what do you think about this? I am wondering if this should not be added to the source code 🤔

Here is an exemple of how I implemented it in my app :

<!-- MySuperDialog.vue -->
<template>
    <Dialog :open="open" @close="open = false">
        <DialogPanel>
            <!-- ... -->
        </DialogPanel>
    </Dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue';
import { Dialog, DialogPanel } from '@headlessui/vue';

const open = ref(false);

// ...

watch(open, isOpen => {
  if (isOpen) {
    document.documentElement.style.scrollBehavior = 'auto';
  } else {
    // Wait for the modal to properly close
    nextTick(() => {
      document.documentElement.style.scrollBehavior = null; // Remove scrollBehavior style from root when modal is closed
    });
  }
});
</script>

[danielr-landhi]

it worked! now i need to figure out when i am opening a modal inside another modal it keeps activating the scroll to top

[gillesserrien]

Super late to this, but I noticed that removing the code below solved the issue of the scrolling to top.

So in summary, having overflow styles on the body element caused the issue for me.

watch(
    () => props.isVisible,
    (newValue) => {
        if (newValue) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "auto";
        }
    },
    { immediate: true }
);