CODEWITHSUNDEEP
htmlcss
Rohan Sharma
Rohan Sharma

Reputation: 326

Transition property weird effect on border size on hover

I want to have a border-bottom effect on hover.

I am using transition property on hover, however after the transition-duration is over the border size changes/reduces by a pixel or so, which seems weird. Please help fix this and also would love to know the reason for this effect.

enter image description here

HTML -

<nav class="navbar">
   <ul>
     <li>
       Home
     </li>

     <li>
       About us
     </li>

     <li>
       Contact us
     </li>
   </ul>
</nav>

CSS -

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    width: 90vw;
    margin: 0 auto;
    font-size: 1.2rem;
    background-color: #f1f1f1;
}

.navbar ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

.navbar ul li {
    padding: 10px 20px;
    margin: 5px;
    color: #333;
    cursor: pointer;
    border-bottom: 4px solid transparent;
}

.navbar ul li:hover {
    color: orangered;
    border-bottom: 4px solid orangered;
    transition: all 1s;
}

Here is the code - https://codepen.io/rawn01/pen/bGBmBdK

Upvotes: 0

Views: 484

Answers (1)

rauberdaniel
rauberdaniel

Reputation: 1033

The reason for this happening is how the browser optimizes rendering. For animating / transitioning effects it often separates the affected element into a separate "composition layer" for performance reasons.

You can try several ways to attempt to fix the graphical issue:

  1. add will-change attribute in order to tell the browser to keep the element on a separate layer

  2. modify your transition: all 1s to a more specific one (e.g. transition: color 1s, border-bottom-color 1s). Also make sure to only modify the border-bottom-color attribute, not the whole border-bottom attribute with size and type (even though it stays the same)

Upvotes: 1

Related Questions