如何避免在盒子阴影过渡上闪烁？

Question

我有 动画 框阴影 悬停 的 CSS。它适用于 Firefox，但在 Opera/Chrome 浏览器 中会导致闪烁。

是否可以在没有额外标记和伪元素的情况下修复它？

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0 #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>

Answer 1

尝试设置 0.09px 的 boxshadow

.hover {
max-width: 400px;
    color: red;
    background-color:  blue;
    display: table;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.09px white;    
    transition: all ease 5.5s;
}
.hover:hover {
    background-color:  blue;
   box-shadow: inset 440px 0 0 0 #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.09px #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0.09px #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>