inset box-shadow visual-artifacts in google chrome

Question

I have an element with a border created with a box-shadow

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

on :hover I change the box-shadow color.

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

Step to reproduce:

1. Hover in and out of the element and observe rounded corners. If you cant see it try hovering in and out a few times faster, unfortunately, the behavior is inconsistent, sometimes it happens from the first hover and sometimes the artifacts disappear, but they always come back.

Note: The artifacts are more visible on a monitor with low resolution, on a retina display, they are barely visible

Any idea how to get rid of those artifacts?

So far the only solution is to remove the inset from the box-shadow or remove the border-radius. In my case, this is not a solution I need the inset and the radius.

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>

Here is a screenshot from chrome.

Answer 1

Try adding:

transform: translate3d(0,0,0);

To the element that will receive box-shadow. Like yours:

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

It doesn't do anything more than changing the way browser renders this element.