Exceptional Behaviour of Modal in iOS app

Exceptional Behaviour of Modal in iOS app

  

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

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

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

Solution

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


Solution

Thanks for letting us know.