css - 谷歌浏览器中的插入框阴影视觉工件

Question

我有一个带有框阴影创建的边框的元素

div {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
}

on :hover 我改变了盒子阴影的颜色。

div:hover {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 87%);
}

重现步骤：

1. 将鼠标悬停在元素内外并观察圆角。如果您看不到它，请尝试以快几倍的速度进出悬停，不幸的是，行为不一致，有时它会从第一次悬停时发生，有时工件会消失，但它们总是会回来。

注意：伪影在低分辨率显示器上更明显，在视网膜显示器上，它们几乎不可见

知道如何摆脱这些文物吗？

到目前为止，唯一的解决方案是从盒子阴影中删除插图或删除边框半径。就我而言，这不是我需要插图和半径的解决方案。

div {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
  border-radius: 4px;
}

div:hover {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 87%);
}

/*styles Not related to the issue*/
div {
  width: 300px;
  height: 100px;
}

<div></div>

这是来自 chrome 的屏幕截图。