过渡属性对悬停时边框大小的奇怪影响答案

【问题标题】：Transition property weird effect on border size on hover过渡属性对悬停时边框大小的奇怪影响
【发布时间】：2021-03-08 20:38:57
【问题描述】：

我想在悬停时产生边框底部效果。

我在悬停时使用过渡属性，但是在过渡持续时间超过边框大小后，边框大小会更改/减小一个像素左右，这看起来很奇怪。请帮助解决这个问题，也很想知道造成这种影响的原因。

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;
}

这是代码 - https://codepen.io/rawn01/pen/bGBmBdK

【问题讨论】：

在什么浏览器上会出现这种情况？
chrome 和 firefox 都
我在 chrome 88.0.4324.190 (64bit) 上进行了测试，一切正常。
You nav li 受到其中字母数量的影响。也许尝试将“家”和“关于我们”增加到“联系我们”的大小
我猜这是浏览器的问题，它对我来说在 Brave 上也可以正常工作。

标签： html css

【解决方案1】：

发生这种情况的原因是浏览器如何优化渲染。对于动画/过渡效果，出于性能原因，它通常将受影响的元素分成单独的“合成层”。

您可以尝试多种方法来尝试修复图形问题：

添加will-change 属性以告诉浏览器将元素保留在单独的层上
将您的transition: all 1s 修改为更具体的（例如transition: color 1s, border-bottom-color 1s）。还要确保只修改 border-bottom-color 属性，而不是修改整个 border-bottom 属性的大小和类型（即使它保持不变）

【讨论】：

border-bottom-color 为我解决了这个问题。谢谢！