1

I'm trying to achieve a simple "Underline on hover" animation on my navbar links. The animation, however, leaves stray pixels behind after the animation is complete, as shown in the below GIF.

Underline animation leaves stray pixel to the left

The weird thing is, it does not happen if I hover the cursor between two links having the same animation. It happens only when I hover on a link and then move my cursor elsewhere.

The bug doesn't happen while hovering between navbar links

I have implemented the navbar as follows:-

<div class="nav-bar-flex">
      <a href="#">Home</a>
      <a href="#">Company</a>
      <a href="#">Careers</a>
</div>

CSS:

.nav-bar-flex a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.055rem;
}

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 0%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: width 300ms;
}

.nav-bar-flex > a:hover::after {
     width: 100%;
     transition: width 300ms;
}
Abhishek Rajasundaram
  • 13
  • 3

2 Answers2

0

Add opacity to after and its transitions

.nav-bar-flex a {
  display: inline-block;
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: -0.055rem;
 }

.nav-bar-flex > a::after {
  content: "";
  display: block;
  width: 0%;
  opacity: 0;
  border-bottom: 2px var(--secondary-orange) solid;
  margin-top: 0.3rem;
  transition: width 300ms, opacity 300ms;

}

 .nav-bar-flex > a:hover::after {
    width: 100%;
    opacity: 1;
   transition: width 300ms, opacity 300ms;
}

Working solution: https://codepen.io/aledebarba/pen/zYNzOrL

Alexandre Macedo
  • 66
  • 2
  • 5
  • Thank you for your answer, Ale Macedo! I had implemented this workaround earlier. But I did not like the "Fade out" effect this causes when the mouse is hovered off of the link. I am still curious as to what is causing the bug. – Abhishek Rajasundaram Apr 04 '21 at 14:42
  • I looked around for some similar questions and found this answer [https://stackoverflow.com/a/17723401/8441606] about how webkit could make some mistakes while rendering the DOM. A possible solution is to add 'transform: translateZ(0);" to force webkit redraw the element "with attention". – Alexandre Macedo Apr 05 '21 at 09:59
0

It seems to me that the letter-spacing property on the anchor tags is causing some kind of calculation error for the rendering engine which causes it to leave a stray pixel.

So there are two solutions I was able to come up with:

Solution 1:

Use transform to do it like so:

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 100%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: transform 300ms;
     transform: scaleX(0);
     transform-origin: left;
}
.nav-bar-flex > a:hover::after {
     transform: scaleX(1);
}

Solution 2:

Remove letter-spacing from the anchor tags.

By the way, since you have transition on the actual element you do not need to have it again on the hover event.

vio
  • 167
  • 9
  • Thank you for your answer, Vio! **Solution 1** indeed worked out for me. However removing the `letter-spacing` did not change anything. The stray pixel was still there. I'm still curious as to what is causing it. – Abhishek Rajasundaram Apr 04 '21 at 14:45