🐞 useDOMScrollLock sometimes scrolls page back to the top

[jd-solanki]

Steps to reproduce

Check dialog demos randomly multiple times you might get below bug where when you open the dialog window/page suddenly scrolls to the top

Notice when we click on show dialog page is scrolled to the top and when we close the dialog page is back to its position.

What is expected

It should not scroll back to the top when we click on show dialog button

What is actually happening?

Window/page is scrolled to the top when the dialog is visible

[brojor]

I could not reproduce this bug in Chrome 105.0.5195.102, Safari 15.6 (17613.3.9.1.5), or Firefox 104.0.2 (64 bit) on macOS Monterey 12.5

In firefox and safari browsers, there is a button in the dialog that shouldn't be there.

[jd-solanki]

The close button you are seeing in the width demo might be due to some glitch. Please clear the cache and reload the page, hopefully, it will go away.

Moreover, regarding reproducing the issue, you will open demos repeatedly & randomly and in around 20-30 seconds you will get the bug.

I hope this will help you.

[zguolee]

I could not reproduce this bug in Chrome 105.0.5195.102, Safari 15.6 (17613.3.9.1.5), or Firefox 104.0.2 (64 bit) on macOS Monterey 12.5

It may be a bug of vitepress, and the reproduction process: directly enter the link(e.g.Dialog) and refresh the web page, and then it will appear, and even the content will not be available.

[jd-solanki]

@zguolee Bingo!

I thought It is from useDOMScrollLock.

Yes, the Close button in the width demo can be due to VitePress.

I am removing upstream label because the main issue is we are facing a scroll shift while opening dialog.

Maybe I should test this in fresh vuejs project without VitePress and update the issue.

[zguolee]

@zguolee Bingo!

I thought It is from useDOMScrollLock.

Yes, the Close button in the width demo can be due to VitePress.

I am removing upstream label because the main issue is we are facing a scroll shift while opening dialog.

Maybe I should test this in fresh vuejs project without VitePress and update the issue.

There is no problem with building and preview only have warnings. When I refresh the production web, the browser console shows a Hydration completed but contains mismatches. error, which may be a deployment problem(vuejs/vitepress#1143)?

[jd-solanki]

Hey guys,

We have fixed SSR issues so we won't get Hydration completed but contains mismatches. 🥂

[hafiidz]

Hi, not sure if I should post into a new thread, but mentioning it here first, on an unexpected UI behaviour when dialog shows up, in a page that's fit in screen (ie no scroll bar). Forcing a scroll lock in this situation result in creation of scroll bar and hence a jiggle effect where everything on screen is shifted to the left of the newly created scrollbar. This is tested on a Windows 11 Laptop, Chrome browser latest.

Expected behaviour is no scroll lock performed when a page is fit (and thus no existing scrollbar).