Mobile Menu looks different on iPhones than Android phones - html

Question

So this is just a plain and simple responsive menu using only CSS.
The issue is that on iPhones it looks like it will not cover the entire screen like it is supposed to. This works properly on android phones.
I am facing the issue and troubleshooting on BrowserStack. Any help is appreciated.
The domain is: https://chameleon.works/chameleonnew/
Also here is the code for the menu:
HTML:
<nav>
<input type="checkbox" id="nav" class="hidden"/>
<label for="nav" class="nav-open"><i></i><i></i><i></i></label>
<div class="nav-container">
<ul class="items">
<li class="item">
Services
</li>
<li class="item">
<a class="home-nav-a" href="/chameleonnew/about/"> About</a>
</li>
<li class="item">
<a class="home-nav-a" href="/chameleonnew/portfolio/"> Portfolio</a>
</li>
<li class="item">
<a class="home-nav-a" href="/chameleonnew/blog/"> Blog</a>
</li>
<li class="item">
<a class="home-nav-a" href="/chameleonnew/careers/"> Careers</a>
</li>
<li class="item">
<a class="home-nav-a" href="/chameleonnew/contact/"> Contact</a>
</li>
</ul>
</div>
</nav>
CSS:
a.home-nav-a{
color:#fff;
font-family: "Poppins", Sans-serif;
}
header ul {
margin-left: auto;
}
header nav {
margin-left: auto;
}
header ul li {
color: white;
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
letter-spacing: 1px;
display: inline-block;
margin-left: 10px;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li:not(:first-child) {
margin-left: 25px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #1f2227;
font-size: 16px;
text-decoration: none;
letter-spacing: 0.04em;
}
nav ul li a:hover {
color: #808080;
text-decoration: none;
}
#media screen and (max-width: 560px) {
.nav-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: #232323;
opacity: 0;
transition: all 0.2s ease;
}
.nav-container ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-container ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-container ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-container ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-container ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-container ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-container ul li:not(:first-child) {
margin-left: 0;
}
.nav-container ul li a {
padding: 10px 25px;
opacity: 0;
color: #fff;
font-size: 24px;
font-weight: 600;
transform: translateY(-20px);
transition: all 0.2s ease;
}
.nav-open {
position: fixed;
right: 10px;
top: 20px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-open i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-open i:nth-child(1) {
margin-top: 16px;
}
.nav-open i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-open i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-open {
transform: rotate(45deg);
}
#nav:checked + .nav-open i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-container {
z-index: 9990!important;
opacity: 1;
}
#nav:checked ~ .nav-container ul li a {
opacity: 1;
transform: translateY(0);
}
.hidden {
display: none;
}