Have you ever noticed that the bottom menu becomes less precise when hovering over it on certain browsers? While Firefox seems to handle it perfectly, other browsers lack that smooth "snap" effect as you move through the numbers. I'm trying to find a solution for this issue but so far, my attempts have not been successful.
Check out this demo for reference
I attempted to use z-index to fix the problem, but it didn't work as expected.
<div id="projects">
<ul>
<li>
<a data-project="1" href="cirqleui.html">01</a>
</li>
<li>
<a data-project="2" href="./complexplayingcards/">02</a>
</li>
<li>
<a data-project="3" href="./virtualmirror/">03</a>
</li>
<li>
<a data-project="4" href="./transparentdonation/">04</a>
</li>
<li>
<a data-project="5" href="./sounzer/">05</a>
</li>
<li>
<a data-project="6" href="./smox/">06</a>
</li>
<li>
<a data-project="7" href="./colro/">07</a>
</li>
</ul>
</div>
#projects {
left: 0;
top: 100%;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
padding: 25px 0 0 25px;
position: fixed;
z-index: 3;
font-size: 7vw;
line-height: 0.9;
font-weight: 900;
letter-spacing: -2px;
background-color: transparent;
}
#projects ul {
margin: 0;
padding: 0;
border: 0;
}
#projects li {
list-style: none;
}
#projects a{
color: black;
transition: all .1s ease-in-out;
}
#projects a:hover{
transition: all .1s ease-in-out;
font-size: 300px;
}
The goal is to make the hover effect smoother and snappier as you navigate through the numbers.