[Modal] Scrolling broken for mobile devices from recent 2.3.2 changes

[ngan]

Steps

This can easily be replicated pressing "Run Code" in the "Scrolling Modal" example on a mobile device (Chrome or Android) or even in a device simulator on Chrome Desktop.

Expected Result

It should be able to scroll.

Actual Result

It cannot scroll.

Version

2.3.2

Testcase

https://semantic-ui.com/modules/modal.html#scrolling-modal

This is the culprit: 75dcaa2

[ngan]

@jlukic I'm going to do some more investigation on why 75dcaa2 broke scrolling, but I have a suspicion that when you scroll on the modal, the touch event bubbles up to the dimmable and is canceled (via preventDefault).

[y0hami]

I can confirm this is broken on

• Android Chrome
• Android Firefox
• iOS Safari 11
• iOS Safari 10
• iOS Safari 9
• iOS Chrome

[ngan]

I have a suspicion that when you scroll on the modal, the touch event bubbles up to the dimmable and is canceled (via preventDefault)

After further digging, this is exactly what's happening. I'm not exactly sure what the original commit was trying to solve (no issues referenced) so it's hard to suggest how it should be fixed. Without the patched code, I already can't scroll the background on iOS.

[aakashmalviya]

Another problem is on mobile content inside modal is not scrolling using touch.. Content inside modal scroll only by pressing scroll bar..
Please fix it urgently ........

[aakashmalviya]

Please provide some codes for temporary fixing of this issue. Please ... URGENT !!!!

[ColinFrick]

@aakashmalviya You could revert to 2.3.1 until this is fixed

[aakashmalviya]

@ColinFrick Okay. Thank you for suggestion. I will do it...

[aakashmalviya]

The problem is also in popup. Scrolling in popup also not working using touch on mobile.

[nasatome]

When reverting to version 2.3.1 it is solved.
It affects pages even if they are not using modal or dimmer windows.

module.unbind.events they are never called; this break all page in touch screen (with the new commit)

unbind: 
  events:

I do not know how semantic-ui works but a quick debugging led me to:
module.destroy (); It is never called

so that
$dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
it can not be applied

it's a good idea to mark this bug as a high priority, it practically leaves semantic ui unusable drives with touch (android / ios)

[andygmorris]

I found this error too today when developing a new website (clean code) with SUI v2.3.2 - Reverting SUI back to v2.3.1 (with jquery v3.1.1 or v3.3.1) resolves the issue. Indeed, should be a High Priority fix as this breaks mobile websites (if people were to use the latest version).