-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Modal] Scrolling broken for mobile devices from recent 2.3.2 changes #6449
Comments
I can confirm this is broken on
|
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. |
Another problem is on mobile content inside modal is not scrolling using touch.. Content inside modal scroll only by pressing scroll bar.. |
Please provide some codes for temporary fixing of this issue. Please ... URGENT !!!! |
@aakashmalviya You could revert to 2.3.1 until this is fixed |
@ColinFrick Okay. Thank you for suggestion. I will do it... |
The problem is also in popup. Scrolling in popup also not working using touch on mobile. |
When reverting to version 2.3.1 it is solved. module.unbind.events they are never called; this break all page in touch screen (with the new commit)
I do not know how semantic-ui works but a quick debugging led me to: so that it's a good idea to mark this bug as a high priority, it practically leaves semantic ui unusable drives with touch (android / ios) |
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). |
I confirm the appearance of the problem after last update |
@jlukic There will be some way to prioritize this problem that leaves semantic-ui not usable for current mobile use |
Confirmed. |
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? |
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:
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)
} |
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. |
I have same problem. |
Is this the reason scrolling on https://semantic-ui.com/kitchen-sink.html doesn't work on mobile devices? |
@cprcrack I do not know but i solved it altering version to 2.2.14 |
@samuelmattos you dont need to use such old version, use 2.3.1 and it will be fine. |
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? |
@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. |
I fix it -> #6495 |
Hi, |
To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:
|
This comment was marked as spam.
This comment was marked as spam.
@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... |
@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. |
@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 |
@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. |
@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. |
@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). |
@hammy2899 I mean the original idea for Fomantic UI is good and understandable in this situation: 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. Bro. You should really consider letting more people maintain this stuff.... |
I mentioned why we where doing this in that issue. Can we keep this issue on topic please. |
Solved this bug wih Fomantic-UI. Thanks guys) |
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? |
This comment was marked as spam.
This comment was marked as spam.
I have already tried to do it, but the files look different. I tried to replace some lines of |
We just replaced the SUI modal.js with FUI modal.js for now and everything seems to work fine... |
I tried to replace SUI modal.js with FUI modal.js, but in my case it doesn't do the trick. 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 :( |
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. |
I am having a similar issue with semantic 2.4.2. |
I was able to temporally fix it by replacing the 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 |
I wonder if you guys could work together in the same repo <3. |
I use this in my project, this fixed mobile modal scrolling, but import no selection for additional selection dropdown. |
Hello everybody. |
Hi All!
|
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
The text was updated successfully, but these errors were encountered: