I've encountered a strange issue while working on my website (beta.kylehorkley.com). When I hover over the links in the sidebar, the sidebar disappears momentarily and then reappears about a second later. This problem is occurring in Chrome and Opera browsers, but Firefox and Edge are working fine.
Here is the HTML code for the sidebar:
<div id="sidebar" class="sidebar">
<a href="/" class="sidelink active">home</a>
<a href="/contact/" class="sidelink">contact</a>
<a href="/portfolio/" class="sidelink">portfolio</a>
<a href="/about/" class="sidelink">about</a>
</div>
And this is the CSS code for the sidebar:
.sidebar {
background-color: rgba(255, 255, 255, 0.95);
height: calc(100% - 91px);
overflow-x: hidden;
position: fixed;
top: 91px;
left: 0;
width: 100%;
z-index: 999;
}
Lastly, here is the CSS code for the sidebar links:
.sidelink {
border-bottom: 3px solid;
border-bottom-color: transparent;
color: rgb(50, 125, 150);
display: block;
font-family: "Varela Round";
font-size: 20px;
font-weight: 400;
margin: 26px 24px 0 24px;
opacity: 0.8;
padding: 0 4px 11px 4px;
text-transform: uppercase;
transition: opacity .35s ease;
}
.sidelink:hover {
opacity: 1;
transition: opacity .35s ease;
}
.sidelink.active {
font-weight: bold;
opacity: 1;
}