0
142
ViewsHTML Vertical Scroll Glitching on Mobile
I have a website and if I open it from any mobile device when I open a sidenav and scroll it down, a strange glitch appears and I don't know how to remove it.
The glitch appears at the bottom of the sidenav when I use Safari but on Google Chrome the glitch appears on the top of the sidenav.
Any idea how to make this glitch disappear?
The basic css and the sidenav code:
.sidenav {
background-color: black;
color: white;
display: flex;
flex-direction: column;
height: 100%;
width: 0;
position: fixed;
z-index: 999;
top: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
transition: .3s ease-in-out;
}
.sidenav-inner {
padding: 1rem;
height: 100%;
}<button onclick="document.getElementById('sidenav').style.width = '100%';">OPEN</button>
<div class="sidenav" id="sidenav">
<div class="sidenav-inner">
<span>ITEMS</span>
</div>
</div>
·
Juan Pablo Isaza
Answer question