Semantic-UI Modal not working in some mobile browsers.

Modal not working with Samsung Browser (S7 - Android 7) and Firefox (from the same mobile). It crashes the whole page.

May 06 '17 22:05 dacripox

In our case, page does not crash, but the black overlay does appear while modal does not.

Unfortunately I do not have access to the device itself, so I can't help with debugging.

Jun 12 '17 11:06 DePalmo

May you take a look at this page? They have virtual samsung devices for free. http://developer.samsung.com/remotetestlab/rtlDeviceList.action

Thanks!

El lun., 12 jun. 2017 13:57, DePalmo [email protected] escribió:

In our case, page does not crash, but the black overlay does appear while modal does not.

Unfortunately I do not have access to the device itself, so I can't help with debugging.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/5341#issuecomment-307768241, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9LuY9Covpn8cvqtW6DaKJq3aDFpnjvks5sDSeMgaJpZM4NS7aw .

Jun 12 '17 21:06 dacripox

I figured out that Samsung Browser is nothing else than a broken version of Chrome. I do not have a proper solution available, but we can hide modals if we use a custom button for closing modals and we also manually hide dimmer just before the modal is being closed. Code:

$('body').on('click','.close-popup',function(e){ e.preventDefault(); $('body').dimmer('hide'); $(this).parents('.ui.modal').modal('hide'); }); });

Jun 16 '17 14:06 DePalmo

Ok. Thank you. May you give me some solution to show the popup too?

El vie., 16 jun. 2017 16:11, DePalmo [email protected] escribió:

I figured out that Samsung Browser is nothing else than a broken version of Chrome. I do not have a proper solution available, but we can hide modals if we use a custom button for closing modals and we also manually hide dimmer just before the modal is being closed. Code:

$('body').on('click','.close-popup',function(e){ e.preventDefault(); $('body').dimmer('hide'); $(this).parents('.ui.modal').modal('hide'); }); });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/5341#issuecomment-309036153, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9LuaaA_vzqJWzDGeIgyk09eAxymFT6ks5sEo0PgaJpZM4NS7aw .

Jun 16 '17 14:06 dacripox

I used different transition style. Not sure which one is default, but after changing it to 'fade' modals have started to appear.

Initialize modals:

$('.ui.modal').modal({ transition:'fade' });

Open it:

$('body').on('click','.register-btn',function(e){ e.preventDefault(); $('.register.ui.modal').modal('show'); });

And then close it:

$('body').on('click','.close-popup',function(e){ e.preventDefault(); $('body').dimmer('hide'); $(this).parents('.ui.modal').modal('hide'); });

A comment to developers of Semantic UI: I constantly got this error: "Transition: Element is no longer attached to DOM. Unable to animate.". Note that same code works in all other desktop and mobile browsers, just the Samsung Internet browser has issues (at time of writing was the latest, version 5.4.00-75).

Jun 16 '17 15:06 DePalmo

Perfect. I will try it. Thanks!

El vie., 16 jun. 2017 17:04, DePalmo [email protected] escribió:

I used different transition style. Not sure which one if default, but after changing it to 'fade' modals have started to appear.

Initialize modals:

$('.ui.modal').modal({ transition:'fade' });

Open it:

$('body').on('click','.register-btn',function(e){ e.preventDefault(); $('.register.ui.modal').modal('show'); });

And then close it:

$('body').on('click','.close-popup',function(e){ e.preventDefault(); $('body').dimmer('hide'); $(this).parents('.ui.modal').modal('hide'); });

—

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/5341#issuecomment-309050554, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9LuR5rHvJyJHcO07N8mq7MiQmgznRrks5sEpmBgaJpZM4NS7aw .

Jun 16 '17 15:06 dacripox

Hi @DePalmo, you get the error, because an element is, well, no longer exists in the DOM. It usually happens with popups that have preserve: false, but can happen with any element that either disappears from the DOM, or that moves to a different place in the DOM. When you initialize a modal with $(modal).modal(), the component also moves a modal into .ui.modals container, so if some transition was initialized before that, you’d get the error. JavaScript frameworks can also be moving some things around, and cause the error as a result.

Jun 16 '17 21:06 awgv

@Banandrew I do understand what error wants to say but I assume you missed my note where I mentioned that the same code works in all other browsers. Also, let me reassure you that the element is still there, I do not move (or remove) it and I do not use JS frameworks. I also did a console.log() of element just before the execution of the code and it's still in the DOM where it should be. Even if I check through Developers Console in Chrome (or Samsung Internet), element is still there ...

I can't point fingers for problems about the issues at hand, but strangely, the modals do show if I change the transition into 'fade' (note that in other browsers I didn't need to do that, default worked fine) and that the modals do hide if I manually call the dimmer's hide function before hiding the modal (which is not required in other browsers).

I assume that Samsung Internet browser tries to be clever and does something with the DOM, which breaks the Semantic JS code.

Jun 17 '17 11:06 DePalmo

@DePalmo Ah, yes, my apologies, I briefly read the message and completely missed the last part. Thanks for clearing it up.

Jun 17 '17 11:06 awgv

I'm still having the same problem. The above code it doesn't work for me.

Initialize modals:

$('.ui.modal').modal({
transition:'fade'
});
Open it:

$('body').on('click','.register-btn',function(e){
e.preventDefault();
$('.register.ui.modal').modal('show');
});

But, when I have more Semantic UI components in DOM and I use them (like a side menu), then it triggers the modal, but I cannot close it and it breaks all the jQuery code. :(

Jun 20 '17 08:06 dacripox

Couldn’t reproduce it on the latest Chrome for Android as well as the latest Samsung Internet that’s 5.4.21.54—no crashes or black overlays. Could anybody please confirm?

Jul 23 '17 16:07 awgv

It's only happening in Samsung S7 native broswer, in my case, the native browser cannot hide modal, it left modal on the screen and blocks user to proceed. Device: Samsung S7 Device Version: Android v6 Device Browser: Native

Aug 09 '17 06:08 XiLiuRoy

Hi @XiLiuRoy, what version of Samsung Internet were you using? I think you can check it in the browser’s “About” section.

Aug 09 '17 06:08 awgv

Hi @Banandrew, i just got back from tester, the device detail: Device: Samsung S7 Device Version: Android v7 Device Browser: Native browser v 5.4.00-75 Please let me know if you need more details. Thanks

Aug 09 '17 22:08 XiLiuRoy

Confirming the issue on 5.4.00-75. I’m assuming it’s the same thing with transitions mentioned above and in #5515—please give it a read if you’re interested in the issue.

Aug 11 '17 10:08 awgv

@Banandrew Just a hint, to debug on Samsung Internet, you can install it on non-Samsung devices:

https://www.androidauthority.com/samsung-internet-browser-android-793983/ https://play.google.com/store/apps/details?id=com.sec.android.app.sbrowser&hl=en

or preview the changes on Samsung Developers http://developer.samsung.com/remotetestlab/rtlDeviceList.action#

Oct 27 '17 15:10 aguyinmontreal

I try with this fix https://github.com/Semantic-Org/Semantic-UI/issues/5341#issuecomment-309050554

But when i set settings of modal to "detachable: false,". Modal is behind the dimmer.

Mar 05 '18 09:03 Messa1

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!