1

I am facing a problem very similar to what was reported and resolved in this SO Question: iOS 11 Safari bootstrap modal text area outside of cursor . However, the difference for me is that I am using Aurelia & Semantic UI.

I have tried using position: fixed in ux-dialog-body as described in several fixes for the problem occuring in bootstrap (in those examples to be added to the body of the modal), however that did not work.

I would appreciate any help on this issue, thanks in advance.

enter image description here

Ebbs
  • 1,030
  • 3
  • 20
  • 38

1 Answers1

2

So I got the idea for the fix here : Semantic-Org/Semantic-UI-React

Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.

iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

In opening the modal

if (this.iOS) {
    $('body > :not(ux-dialog)').hide();
    $("ux-dialog").show();
}

And closing

if (this.iOS) {
    $('body > :not(ux-dialog)').show();
    $("ux-dialog").hide();
    $("ux-dialog-overlay").hide();
    $("ux-dialog-container").hide();
}

I hope this helps someone else.

Ebbs
  • 1,030
  • 3
  • 20
  • 38