CSS is different on iOS than Android?

Question

This site is built in ProcessWire CMS hence the PHP for the nav

This is probably best explained with images.

This is how the nav should look

And this is how it looks

I am completely baffled. I have tried z-index: 999 on the nav and it hasn't effected anything. I, being on Android (Galaxy S8), have experienced no problems at all across Chrome and Edge, however my colleagues, who are both on iPhone 7 are telling me that the navigation is hiding behind the body.

<div class="nav-mobile pure-u-1" id="menu" style="z-index: 999">
        <ul class="navbar-mobile pure-img pure-u-1" style="z-index: 999
        ">
            <img src="<?php echo $config->urls->templates?>images/crest.png">
            <div class="icon-center">
                <i class="fa fa-bars fa-4x icon" id="openbtn" onclick="openMenu()"></i>
            </div>
            <?php

            $homepage = $pages->get("/");
            $children = $homepage->children;
            $children->prepend($homepage);

            foreach($children as $child) {
                $class = $child === $page->rootParent ? " class='on'" : '';
                echo "<li class='pure-u-1-9 font' ><a$class href='{$child->url}'>{$child->title}</a></li>";
            }
            ?>
            <div>
                <li class='pure-u-1-9 font' onclick="closeMenu()">Close</li>
            </div>
        </ul>
    </div>

nav {
    display: none;
}
.foot footer {
    width: 100%;
}
.nav-mobile {
    display: inline-block;
}
.nav-mobile li {
    display: none;
}
.icon-center {
    display:inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}
.nav-mobile .icon{
    display: inline-block !important;
    margin: auto;
}
.navbar-mobile img {
    width: 15%;
    margin: auto;
    display: block;
}
.opening {
    margin-top: 185px;
    text-align: center;
}
.page-mid {
    margin-top: 185px;
}
.navbar-mobile {
    margin-bottom: 0;
    margin-top: 10px;
}

.mobile-menu li {
    display: block;
    text-align: center;
}

.fb-page {
    max-width: 400px;
}

Answer 1

To give a good answer, more code or a working example is needed. But i see invalid markup e.g. a <div> as child of <ul>. This alone could cause rendering problems.