iPad平板电脑上的侧边选项卡不滚动[溢出问题]

Question

按下按钮“Kalendārs” on this page将打开左侧页面。它在Windows / Android上可以正常打开，并且可以在iPad平板电脑上滚动。 iPad平板电脑仅显示页面的一部分，其余部分被裁剪。滚动仅在后台页面发生。我已经尝试过修改z-index和溢出属性，但它不适用于iPad。将position属性设置为固定值以外的任何值，将使该页面完全不显示。

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "95%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

<style>
.sidenav {
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(248, 248, 248, 1);
	overflow: scroll;
	transition: 0.5s;
	padding-top: 20px;
	
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	width: 5%;
	overflow: scroll;
	text-decoration: none;
	font-size: 45pt;
	color: #000000;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover {
	color: #999999;
}

.sidenav .closebtn {
	position: sticky;
	top: 0;
	right: 10px;
	float:left;
	font-size: 45pt;
	margin-left: 10px;
	font-color: #FFF;	
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>

 <span style="font-size:30px;cursor:pointer; text-align:right; overflow:scroll" onclick="openNav()">
        <h2>Kalendārs</h2>
        </span>

<div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <h3>Tekošais laiks un datums: <?php echo(strftime("%H:%M:%S , %A, %d %B , %Y gads ")); ?></h3>