[Modal] Touch scrolling broken in scrolling modals (reproduced in 2.4.2 using Chrome Desktop)

[keshmir]

Title (Put in field above)

[Modal] Touch scrolling broken in scrolling modals (verified in 2.4.2)

Steps

This can be verified using the Semantic-UI website per below:

1. Use an iPad (or Microsoft surface or Chrome Desktop emulating iPad Pro) and go here: https://semantic-ui.com/modules/modal.html
2. Scroll to the bottom to the section titled "Scrolling Content"
3. Click on "Run Code"
4. Observe that you are not able to scroll the page using touch.

Expected Result

The user should be able to scroll the page using touch

Actual Result

The user is not able to scroll the page using touch. The only thing that works is tapping the thin scrollbar itself that is quite awkward.

Version

2.4.2
Actually I have not been able to upgrade my version of Semantic-UI since 2.2.14. This has been broken since > 2.3

Testcase

Semantic-UI Modal page demo is broken using an iPad per above steps.
https://semantic-ui.com/modules/modal.html

[habibiazmi123]

i have same problem, please help

[keshmir]

I found a way to reproduce this issue using Chrome desktop. You can enable development mode and launch the inspector. The browser now emulates a touch device. From drop-down pick iPad Pro. Now you can follow original steps and observe that dragging with the mouse does not scroll the page. I have updated the original thread as well with this info.

[keshmir]

anyone has a clue what the issue is here? I would love to contribute to help getting this fixed if someone can provide some directions. :)

[y0hami]

@keshmir This is the PR from fomantic fomantic/Fomantic-UI#273

[keshmir]

Wow @hammy2899 thank you for pointing me to Fomantic-UI. Looks like I have been missing out. I too were sad to see no activity in Semantic-UI. Thank you for all your effort keeping this project alive on FUI. I am going to switch to FUI now and hope that it will merge back soon. Thanks again.

[Epochi]

until this is fixed it's possible to go around this bug by preventing event bubbling

$('.ui.modal').on('touchmove', function(event) {
  event.stopImmediatePropagation();
})