mat-dialog-content bottom edge scroll blocked on iPhone

[mary431982]

What is the expected behavior?

Scroll at the edges(bottom edge, top edge) of dialog content not blocked..

What is the current behavior?

When I test your example Dialog with header, scrollable content and actions - on iPhone - and I scroll and reach the bottom of the scrollable content - when I by accident try to scroll once more towards the bottom - the scroll becomes unresponsive and I cant scroll up or down until I wait one second or more and try to scroll again towards the top...

What are the steps to reproduce?

https://stackblitz.com/angular/nqvvaaopbel?file=app%2Fdialog-content-example.ts
Scroll till the bottom end, and when You reach the bottom and scroll bar dissapears - try to scroll again towards bottom - at that moment scroll is blocked (off course you cant scroll towards the bottom because you reached the end - BUT at that moment you ALSO CANT SCROLL TOWARDS THE TOP and seems like scroll is unresponsive until you stop touching the screen for a short time - for example 1second (or little bit less maybe)...

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I tested it on IPhone, Safari, version 12.1...

Is there anything else we should know?

[macjohnny]

see also #5606 (comment)

[mary431982]

Can you please provide the code for solving the problem (detecting the touchmove and wrong direction)...I can't seem to write the proper code that is solving the problem on my iPhone..

[billyjov]

Is there a workaround for this issue ?

@macjohnny Your comment could not help me. Maybe you want specify more

[rdesimone]

@jelbourn the issue can be easily reproduced with the Stackblitz example from the Material docs on an iPhone (I used an XR with iOS 14.4) https://stackblitz.com/angular/lkmgbpppxdd
I am not sure if this issue can be solved without touching MatDialog code - IMO somebody from your team should take a serious look at it. Currently it is not possible to use scrollable content in a dialog with iOS which obviously limits the use of MatDialog. Thanks!

[MrTaiji]

@rdesimone I am actually pretty sure that this issue is iOS Safari only. Firefox and Chrome do not have any issues with scrolling in MatDialog.

I wasted way to much hours on trying to find any workaround. The best that one can do is probably making the dialog itself a fixed screen size and making a parent div scrollable. For some reason, the parent div cannot have equal size to the dialog, or else the dialog scrolling seem to "take over" for some reason. Even this workaround does not work allways.

[rdesimone]

@MrTaiji thanks for replying - yes it is only on iOS. As Chrome and Firefox have the same web engine, I assume the issue can also be reproduced on these browsers (but I did not test as Safari is by far the most popular browser on iOS).

For our case, I let replace the dialog with a view.

[dmitrijkuba]

Chrome has the same issue with scrolling on ios, it's stuck when i scrolling to the top/bottom of the page 😕

[zarend]

Hello @mary431982 ,

Thank you for reporting. I believe we may have fixed this issue in v15. I was wondering if we could check with you if this issue requires further action. Does upgrading to v15 resolve the issue for you?

Best regards,

Zach

[richi8]

The stackblitz is broken on my ios device, but I was facing the same issue and was able to fix it using the following css code

.mat-mdc-dialog-content { overscroll-behavior-y: none; }

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior