Problems with responsive drop down bar - css

Question

i have started to put together a website, that uses a drop down menu in smaller sizes.
it is http://www.southmoorac.com/newindex.html
i have two pages working, the home age and the league page, but it's the drop down menu that is giving me problems, or should i say, viewing it on an iphone.
i have tested it on a pc, chrome developer tools, and it is working fine, but when view on an iphone that gives me a problem.
i have worked out that it is one line of code that is not working on the phone that is giving me the problem, so i'm looking for a work around.
this is the releveant html:
.menu {
position: absolute;
text-align: left;
top: 0;
left: 0;
background-color: rgba($dgreen, 0.99);
width: 100%;
height: 100vh;
transform: scale(1, 0);
transition: 400ms;
transition-timing-function: cubic-bezier(1, 0, 0, 1);
transform-origin: top;
&__box {
margin: 0;
padding: 0;
list-style: none;
height: 100vh;
display: flex;
flex-direction: column;
cursor: pointer;
}
&__list-item {
#include letterspace(0.3rem);
width: 100%;
height: 100%;
// padding: 6.2vh;
border-bottom: 1px solid rgba(121, 122, 121, 0.301);
}
&__item-link {
display: flex;
align-items: center;
color: $orange;
font-size: 1rem;
text-decoration: none;
text-transform: uppercase;
height: 100%;
width: 100%;
padding: 2.2vh;
padding-left: 20%;
padding-right: 0;
&:hover,
&:focus {
background-color: $orange;
color: white;
}
}
<nav class="menu">
<ul class="menu__box">
<li class="menu__list-item"><a href="http://www.southmoorac.com/newindex.html"
class="menu__item-link menu__active uncheck"><i
class="fas fa-home menu__icon"></i>Home</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="fas fa-info menu__icon"></i>About Us</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-calendar-alt menu__icon uncheck"></i>Matches</a>
</li>
<li class="menu__list-item"><a href="http://www.southmoorac.com/new_season_summary.php"
class="menu__item-link uncheck"><i class="fas fa-trophy menu__icon ">
</i>League
Table</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-envelope-open menu__icon "></i>Contact Us</a>
</li>
</ul>
</nav>
the code that is causing the problems is the height:100% line in the &__item-link.
the iphone just does not like it.
i have tried taking it out and using veritcal padding to gain height for the a link, but that's been like trying to nail jelly on a wall between different screen heights. it gets around the iphone display problem, but is not a real solution.
i hope you can help....
thanks
malcolm