Ionic 4: Modal not showing on iOS

Ionic Framework
1

Hello,

I have a problem with a modal page and did not find any working solution in the forums.
The modal is created from a tab page and is working perfectly in Safari and Chrome, but in Ionic DevApp on iPhone as well as in iPhone simulator and on the actual device, the modal does not show. You can see it sliding in from the bottom of the screen but then is disappears and there’s only a completely blank screen.

I already tried the following tipps I found on the net:

  • adding .modal { display: flex !important; } to the global scss.
  • adding a custom css class with the above css code to global.scss and apply it in the modal creating as “cssClass”.
  • tried the same with { visibility: visible !important; }

I do not use bootstrap in the project (read that this could cause the problem) and did not apply any other unusual css to the modal.

Any help is greatly appreciated.
Thanks, Alex.

Here’s my ionic info:

Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.3.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.4.1

Cordova:

cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001

1 Like
2

Still did not solve this :frowning:
Can anyone help?

3

Maybe, difficult to tell without your code, therefore I would suggest, try to remove all your custom css in the modal and in the pages and components where you use your modal.

Then try again.

If it works, add again your css brick by brick till you find the one which has a side effect.

If it doesn’t work, then remove the content (template and code) of in the modal.

Then try again.

If it works, add code and template brick by brick till you find what doesn’t work.

4

Thanks for the suggestion @reedrichards !!
After spending several hours of doing this, I finally tracked it down:

In my modal I use a <form> with two input fields of type <ion-input>. I did declare the first one with autofocus="true". This causes the modal to “slide” off outside the screen on iOS devices, leaving a blank screen. When I remove the autofocus="true", the modal works as expected.

I consider this a bug.

Thanks for your help.

Alex

3 Likes
5

Happy to hear you found a solution, well done :+1:

Don’t know if it’s a bug, probably you are right, or a feature. In any case, might worse to report it.

P.S.: I also discovered recently that per default there is an option “input blurring” which could be disabled globally and which could solve such problem (maybe) but which could then have other side effects of course if disabled.

2 Likes
6

Thank you tremendously for sharing what you found. @alex796, Thank you for the brilliant suggestion.

I have to share how happy this made me. This was my exact problem and had to change my UI/UX designs because of this. Luckily something brought me back on the search and here was the answer!! I seriously value this answer more than Diamonds!!

1 Like