Semantic-ui: [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: https://github.com/Semantic-Org/Semantic-UI/commit/75dcaa2694da2aaa681aff1be74b2c0f3fab4028

[ngan]

@jlukic I'm going to do some more investigation on why https://github.com/Semantic-Org/Semantic-UI/commit/75dcaa2694da2aaa681aff1be74b2c0f3fab4028 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).

[hammy2899]

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).

[postbud]

I confirm the appearance of the problem after last update

[nasatome]

@jlukic There will be some way to prioritize this problem that leaves semantic-ui not usable for current mobile use

[0angelic0]

Confirmed.

[smtlab]

I can confirm the issue. My website bounce rate increased suddently to 89% 😑 as my sign in modal opens on page load was unaware of this issue. Is there any temporary fix for this issue, apart from downgrading to 2.3.1 ?

Is there anyway I can help with this?
Thanks

[tmentink]

I appreciate Semantic trying to solve the issue with the background scrolling on mobile devices; however, I don't think 75dcaa2 was the correct approach. Personally I think this issue should be left to the developers until there is a simple and universal solution.

I've tackled this problem several times and have solved it in two different ways:

1. Restrict the body height and structure your HTML so that your modal doesn't propagate the scroll events. Here is a nice blog post that has some working demos as well.

2. Use JavaScript and CSS to manually lock the body in place and then reset the scroll position once your modal closes. I'm actually using this solution on my personal website in the projects and contact modals. You can view the relevant code here.

Here is the bare minimum code needed:

var SCROLL_TOP

function disableScroll() {
  SCROLL_TOP = $(document).scrollTop()

  $("body").css({
    "position": "fixed",
    "left": "0px",
    "right": "0px",
    "top": `${SCROLL_TOP * -1}px`
  })
}

function enableScroll() {
  $("body").css({
    "position": "",
    "left": "",
    "right": "",
    "top": ""
  })

  $(document).scrollTop(SCROLL_TOP)
}

[batata004]

I can confirm this bug happens not only when you have modals opened, it happens even when you dont use modals. In the case of https://www.sitepor500.com.br if you simply open it (dont need to raise/open any modals) the scrolling will not work. I was using 2.3.3. version and then I downgraded it to 2.3.1. and everything came back to work just fine.

[samuelmattos]

I have same problem.

[cprcrack]

Is this the reason scrolling on https://semantic-ui.com/kitchen-sink.html doesn't work on mobile devices?

[samuelmattos]

@cprcrack I do not know but i solved it altering version to 2.2.14

[batata004]

@samuelmattos you dont need to use such old version, use 2.3.1 and it will be fine.

[cprcrack]

I'm a little bit alarmed about the fact that this critical bug made into release and even more by Semantic UI team's slow response time to it. I tried to find info about the team behind Semantic UI but couldn't find anything. Could someone enlighten me on this matter and about the expected future of the project?

[batata004]

@cprcrack I agree with you, this is not an aesthetic bug or comestic stuff. This is a serious bug, I runned an adwords campaign with about 300 dolars on 2 days just to realize I was not having any success because I had updated the semantic ui version and it prevented my users to scroll down and find the contact form. Very nasty bug.

Semantic ui is very nice, is a library well documented and despite many errors in its documentation, it is beautiful and light. However serious mistakes like the one reported in this thread make this library lose lots of its credibility.

[byte916]

I fix it -> https://github.com/Semantic-Org/Semantic-UI/pull/6495

[FabrizioCaldarelli]

I've the same problem. After upgrade to 2.3.3, mobile website does not scroll anymore.

To solve, I've downgraded to 2.3.1

[batata004]

When will the fix to this serious bug be patched to the official release?

[lucvanloon]

Also experiencing this bug, unfortunately. Hope to see it in a new release soon. It's very breaking.

[Healyhatman]

Anyone got a fix for scrolling not working in popups on mobile?

[FabrizioCaldarelli]

@Healyhatman Downgrading to 2.3.1

[nasatome]

@Healyhatman : You can temporarily use this fork:
https://github.com/hammy2899/Fomantic-UI
I have been observing them lately and I liked what they have done.

[tmentink]

@Healyhatman If you still want to use v2.3.3 then you can remove the changes from 75dcaa2 and then rebuild SUI via the console.

npm install

[vithd]

Same problem here. Took me a while to find this issue

[batata004]

@nasatome Fomantic is awesome, if more people become aware of it they will move from semantic to fomantic. Lots of updates and good fixes. Yeap, not coming back to semantic ui!

[ngan]

Bump @jlukic -- this is a pretty big issue that is easily resolved through a revert. Just wanna bring it to your attention.

[eroispaziali]

Also affected. Looks like some changes were proposed, any plan for a minor release to address this anytime soon?

[batata004]

It looks like the dev does not care pushing updates to the main branch anymore. And if he does that, I can certainly say that he will break something that was working perfectly before. Unfortunately this is the current situation of the Semantic UI repo: releases with serious bugs that never existed before on things that were already working great.

[jlukic]

Sorry, I just saw this issue. This was a pretty bad regression.. I'm going to be releasing shortly with fix from @byte916

If there's an issue that falls into this category again feel free to email me at [email protected].

[jlukic]

I've adapted #6495 so it works correctly for scrolling modal will be fixed in next.

[smartm0use]

Hi,
I've upgrade Semantic-UI from 2.2.11 to 2.4.2 and I'm encountering this issue.
How can I fix it?

[smartm0use]

To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:

EventTarget.prototype['addEventListenerBase'] = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener){
    if(this !== document.querySelector('body') || type !== 'touchmove'){
        this.addEventListenerBase(type, listener);
    }
};

[lubber-de]

Fixed in https://github.com/fomantic/Fomantic-UI 2.7.0

[jjylha]

@jlukic @hammy2899

Seriously guys.. why do we need Semantic UI and Fomantic UI? Why couldn't @hammy2899 just fix that to Semantic UI?

I just replaced the Semantic UI 2.4.2 modal.js file with Fomantic UI fixed modal.js file and everything works fine...

[batata004]

@jjylha good point. Clearly semantic ui is going down hill, no maintanance and bad support. This is terrible for a recent library like semantic ui. It had SO MUCH potential, just wasted for lack of support and updates.

[hammy2899]

@jjylha @batata004 If you want to find out why FUI was created please read the following https://github.com/fomantic/Fomantic-UI/blob/master/faq.md

[batata004]

@hammy2899 I know why it was created, I already participated in another discussion and I think Fomantic UI is doing a great job. I just see no reason for both exist if semantic ui adopted all the good practices of fomantic: regular and fast updates.

[hammy2899]

@batata004 I did have an explanation somewhere but I can't find it on why we couldn't do it here (SUI repo).

tldr: The author/main maintainer has vanished and we haven't been able to contact him for months and we haven't had explicit permission to start merging PR's and shipping releases therefore we created our own repo/org so we could do so.

[batata004]

@hammy2899 you are doing a great job at fomantic. Just a remember: you can use fomantic at the CDN -> https://www.jsdelivr.com/package/npm/fomantic-ui (it loads very fast).

[jjylha]

@hammy2899

I mean the original idea for Fomantic UI is good and understandable in this situation:
"Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. "

But if you are actually planning to make all of these changes we will not be able to change to Fomantic UI anyway: https://github.com/fomantic/Fomantic-UI/issues/319 No resources to refactor everything.

@jlukic

Bro. You should really consider letting more people maintain this stuff....

[hammy2899]

But if you are actually planning to make all of these changes we will not be able to change to Fomantic UI anyway: fomantic/Fomantic-UI#319 No resources to refactor everything.

I mentioned why we where doing this in that issue.

---

Can we keep this issue on topic please.

[ivanlysakov]

Solved this bug wih Fomantic-UI. Thanks guys)

[smartm0use]

I'm using a forked SUI for my application and the last version is 2.4.2. Can you tell me how to make scrolling with touch working from mobile devices? What to change in the source code of Semantic-UI 2.4.2?

[lubber-de]

@smartm0use Look at the changes of the PR in Fomantic-UI, how we fixed it
https://github.com/fomantic/Fomantic-UI/pull/273 (you already took part in the conversation 😉 )
and adopt the changes to your fork accordingly.

[smartm0use]

I have already tried to do it, but the files look different. I tried to replace some lines of modal.js anyway, but it doesn't work.

[jjylha]

We just replaced the SUI modal.js with FUI modal.js for now and everything seems to work fine...

[smartm0use]

I tried to replace SUI modal.js with FUI modal.js, but in my case it doesn't do the trick.
I'm still fixing my touch problems using this workaround.

That workaround have done the trick for some months, but now it is causing another bug, so I have to find another solution... and yours don't work with my application :(

[zenboss]

To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:

EventTarget.prototype['addEventListenerBase'] = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener){
  if(this !== document.querySelector('body') || type !== 'touchmove'){
      this.addEventListenerBase(type, listener);
  }
};

It works for our project. Thank you smartm0use, you made me solving this bug without upgrade the UI library, as I don't want to continuously upgrade the dependence version for this UI library in my project. Sometimes the new version fixes one bug but brings new bugs to me. For a commercial project, stability is more important than the new feature.

[lucasdavila]

I am having a similar issue with semantic 2.4.2.

[lucasdavila]

I was able to temporally fix it by replacing the .semantic/src/definitions/modules/modal.js file with the one from fomantic https://raw.githubusercontent.com/fomantic/Fomantic-UI/master/src/definitions/modules/modal.js

Then I build semantic again, copied the dist files to my project and it worked.

The fixup is related to this PR https://raw.githubusercontent.com/fomantic/Fomantic-UI/master/src/definitions/modules/modal.js

[lucasdavila]

I wonder if you guys could work together in the same repo <3.

[RicottaZhang]

To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:

EventTarget.prototype['addEventListenerBase'] = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener){
  if(this !== document.querySelector('body') || type !== 'touchmove'){
      this.addEventListenerBase(type, listener);
  }
};

I use this in my project, this fixed mobile modal scrolling, but import no selection for additional selection dropdown.

[lbettuz-lcb]

To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:

EventTarget.prototype['addEventListenerBase'] = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener){
    if(this !== document.querySelector('body') || type !== 'touchmove'){
        this.addEventListenerBase(type, listener);
    }
};

I use this in my project, this fixed mobile modal scrolling, but import no selection for additional selection dropdown.

Hello everybody.
Hope you've found your work-around.
Unfortunately, this one won't be ok for me. Those lines creating infinite loop with a specific manipulation.
(opening modal, coming back, reopening modal).
Not sure how to deal with this. Very annoying.
May be my only solution is to downgrade.