Quasar: QDialog/Loading breaks the page scroll in certain scenarios

[ghost]

Describe the bug
When I open and close q-dialog, the scroll bug, It's impossible to scoll down

Video capture of the scroll bug
https://media.giphy.com/media/XDvaTXvXT9OQ26HRmF/giphy.gif

Codesandbox
https://codesandbox.io/s/priceless-resonance-119xj

To Reproduce
Steps to reproduce the behavior:

1. open code sandbox in full screen
2. use chrome dev tools for open iphone 6/7/8 responsive screen
3. refresh page
4. click to a bodypart for go to /exercices/list/:type route
5. click to FILTER button and select any filter you want
6. click to the cross for delete filter
7. try to scroll down in the ex list and the bug appear

Expected behavior
When I select and delete a filter, I want to scroll down in the list

Platform (please complete the following information):
OS: windows
Node: 10
NPM: 6
Browsers: Chrome Version 80.0.3987.149

Additional context
This bug appear only to Iphone 6/7/8 mode all other screen mode works

[rstoenescu]

Hi,

For the life of me, I cannot reproduce :|

[rstoenescu]

Can you make a screen recording of what you are doing exactly pls? Maybe I am missing something.

[ghost]

Hi,
(thanks for quasar framework <3)

Video capture of the scroll bug:
https://media.giphy.com/media/XDvaTXvXT9OQ26HRmF/giphy.gif

to repeat the bug you have to do exactly the step that I wrote,

This bug appear only Iphone 6/7/8 mode, if I dont click on filter in v-dialog, or if I delete v-dialog, I can scroll down normaly. I think there is a problem with v-dialog

[pdanpdan]

I suppose there is something wrong with the chrome emulation for the version you use - I'm using Chrome dev (83) on windows and all looks good.

[ghost]

I use Chrome Version 80.0.3987.149, I will try with your version

[ghost]

Same bug with chrome Version 83.0.4100.3 (Build officiel) dev (64 bits),

Have you refresh the page after passed in iphone 6/7/8 mode ?

[ghost]

On any browser if I follow exactly steps what I worte the bug appear in codesandbox with two different laptops (dell xps 15 and surface laptop)

[pdanpdan]

Can you try and disable the browser extensions?

[ghost]

Yes, same bug in private mode without extentions

[pdanpdan]

Any errors in the console? Can you make a screenshot of the elements panel including the opening body tag?

[ghost]

of course,

[pdanpdan]

Elements panel :) And the screenshot should be from when you cannot scroll. By the way - the problem looks like you can scroll, but the page scroll back on top?

[ghost]

Yes when I scroll down on this list the page scroll back on top

[pdanpdan]

And you can reproduce the problem on the codesandbox you shared?

[ghost]

yes of course both local env and code sandbox

[thugic]

I am facing the same issue.

Not on Chrome, but on Safari on iOS and on Safari on a MacBook ...

Here's my CodeSandbox example.

https://imd3g.sse.codesandbox.io/

Edit: it happens on Chrome, too.

Edit2: If I remove the "Loading" part from the Vuex Action it works flawlessly...

Still, if that would be the real issue, what would be the best solution to still be able to show the loading spinner when doing an Axios call from within a Vuex Action?

[pdanpdan]

Ok. I can reproduce the last example on real iPhone.

[thugic]

Inspecting and tracing the events, it has something to do with the wheel event.
If I remove the wheel event from the events panel, scroll gets restored.

[ghost]

I confirm I have the same behavior

[thugic]

I think this is the same as #6739 (which got closed as solved, but looks like things are related)

[rstoenescu]

Ok, could reproduce the behavior. Will fix it.

[rstoenescu]

@thugic What's the source code for your codepen pls?

[pdanpdan]

https://codesandbox.io/s/imd3g

[rstoenescu]

Problem is with calling internal preventScroll() with wrong second parameter in Loading.
Testing fix...

[rstoenescu]

Fix will be available in "quasar" v1.9.14.

[ghost]

Thanks !