Skip to Content (Press Enter)
2021-04-09 11-42-43
assif_tiger
 
MVP
135Views
4Comments
Solved
Exceptional Behaviour of Modal in iOS app
Question

Greetings,

I have created a kind of Modal/Popup over screen in Mobile App based on the below CSS applied to the Main Container, so that it act as an Modal/Popup.

.myModal{
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
}


Safari & Chrome Browser Output :


Android App Output:



iOS App Output: Design Misbehave - Tested on iPhone SE  & 7





It is working perfect on Browser & Native Android APK, but there is some misbehavior of it on iPhone Device app. The Popup is not rendering as expected, going  behind the bottom bar element.

Is there any limitation with CSS on Project for iOS?


Kindly,

Assif

0
0
04 Sep 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP
Solution

Its Resolved, I kept the entire section in bottom Section at the last.


See solution in context
1
0
04 Sep 2018
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

iOS uses a different rendering engine than Android and Chrome, so you may have differences in behaviour. (Btw, it's "decision" ;).)

0
0
04 Sep 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

Kilian Hekhuis wrote:

iOS uses a different rendering engine than Android and Chrome, so you may have differences in behaviour. (Btw, it's "decision" ;).)

Thanks,

Is there any workaround to add in CSS in order to get it done?

It is working on Android, Browser [ Safari & Chrome] but not Iphone...

I guess it is the issue with z-index in iPhone

0
0
04 Sep 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP
Solution

Its Resolved, I kept the entire section in bottom Section at the last.


1
0
04 Sep 2018
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Thanks for letting us know.

0
0
05 Sep 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.