I am facing an issue with a website I am currently building. The navigation menu seems to flicker when transitioning from one page to another, but this problem only occurs in Chrome and IE.
What's even more puzzling is that the flickering doesn't occur when I open the website in an incognito window on Chrome or when I view it locally.
You can see a live example here -
Below is the code for the navigation:
Navigation HTML -
<body>
<div class="menuButton" onclick="decide(this);">
<div id = "bar1"></div>
<div id = "bar2"></div>
<div id = "bar3"></div>
</div>
<div id ="nav">
<ul>
<a href = "home.html"><li>HOME<span style = "float: right; padding-right: 2%;">></span></li><a/>
<a href = "portfolio.html"><li>PORTFOLIO<span style = "float: right; padding-right: 2%;">></span></li><a/>
<a href = "cv.html"><li>CV<span style = "float: right; padding-right: 2%;>></span></li><a/>
<a href = "contact.html"><li>CONTACT<span style = "float: right; padding-right: 2%;">></span></li><a/>
</ul>
</div>
Navigation CSS -
#nav {
height: 100%;
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;
}
#nav ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
line-height: 2;
margin-top: 20%;
}
#nav a {
text-decoration: none;
}
#nav li {
transition: all .2s ease-in-out;
color: white;
font-size: 25px;
text-align: left;
padding-left: 15px;
}