Page jump on close

[gsabater]

Hello,

for some reason, the whole page takes a jump when closing the vaul. I think that its because of the styles appended on the body, (I'd guess the negative top property) that when removed cause this shift.

Is this a bug or something we can prevent when implementing the component? I have made a video of the issue

https://github.com/Elliot-Alexander/vaul-vue/assets/4948172/7469fbde-06ab-497b-90f8-72d3a18bc310

Thanks for your work and time

[Elliot-Alexander]

Hey! Can you test with version 0.1.0 to see if this bug still persists please?

[gsabater]

Hello again @Elliot-Alexander

I have tested the updated version and looks like is still happen. I have checked twice if there are any css rules conflicting with the vaul, but i havent seen any.

you should be able to reproduce it when the vaul is at the bottom of a page in a body with some scroll. If the page has no scroll, the experience is good, but when there is some scroll, this is moved. Happens on mobile and desktop

let me know if there is anything else i can do

[Elliot-Alexander]

Ah interesting, thank you for confirming that, I'll investigate and try to get a fix out for you :)

[gsabater]

Hello again @Elliot-Alexander I found the poltergeist, the issue was on a property applied by Bootstrap I think, where :root had a css scroll-behaviour: smooth

Specifically this is the code i found. After removing it, the problem is gone.

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

This leads me to question why the page makes the scroll in the first place. is something intended? Second, I'll remove the css property myself, but maybe you want to apply auto to * when the vaul is open to avoid problems for other people.