Semantic-ui: Modal not working in some mobile browsers.

[dacripo]

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

[DePalmo]

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.

[dacripo]

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 [e-mail] 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
.

[DePalmo]

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');
});
});

[dacripo]

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

El vie., 16 jun. 2017 16:11, DePalmo [e-mail] 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
.

[DePalmo]

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

[dacripo]

Perfect. I will try it. Thanks!

El vie., 16 jun. 2017 17:04, DePalmo [e-mail] 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
.

[awgv]

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.

[DePalmo]

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

[awgv]

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

[dacripo]

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. :(

[awgv]

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?

[XiLiuRoy]

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

[awgv]

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

[XiLiuRoy]

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

[awgv]

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.

[aguyinmontreal]

@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#

[Messa1]

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.

[stale[bot]]

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!

[jlukic]

I believe this should be fixed in next release.

[lexik67]

+++

[Tholem98]

Hi, we are in 2020 and this issue still making hard to work with modals. I try to hide a modal an then it broke but just on samsung internet.

How can I evaluate if the client is using samsung internet to change the hide of the modal to another thing?

[iamareebjamal]

You're looking at an abandoned repo. Please check Fomantic-UI

[Messa1]

@Tholem98 here is the link to the repo which @iamareebjamal has proposed - https://github.com/fomantic/Fomantic-UI