2

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.

Artifacts in chrome

enter image description here

m.popov
  • 494
  • 3
  • 14
  • It's a small radius and a narrow box shadow. I don't have a low res screen to try it on (it all looks smooth on my laptop) but I suspect there just aren't enough pixels to the square inch to smooth things out. What do you see if you zoom in a lot on a low res monitor? – A Haworth Oct 21 '21 at 08:59
  • Yh this is normal to me even if I zoomed to 250%, what kind of lowres would not smooth corners – FurrySenko Oct 21 '21 at 09:02
  • I am able to see it even on my mac, it was just more obvious on an old Lenovo monitor. In fact, the screenshot is from my mac. 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. I am sure that the problem is not just in my machine, I client reported this to me as a bug, and a colleague of mine can also reproduce it on his mac. – m.popov Oct 21 '21 at 11:22
  • @AHaworth When I zoom in it is smooth. – m.popov Oct 21 '21 at 11:42
  • Yes, that is expected, as you zoom in more screen pixels are available to smooth the curves. – A Haworth Oct 21 '21 at 11:57
  • I'm seeing these artifacts as well. it looks like the box-shadow is being rendered outside its clip rectangle and as such, dirty pixels are not being cleaned up whenever it needs to be re-rendered. I'm surprised this is still present 7 months later... – josh Jun 02 '22 at 16:32

1 Answers1

2

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.

maszynka
  • 196
  • 4
  • 11
  • how does it change the way it's rendered? – John Miller Sep 14 '22 at 19:49
  • 1
    @JohnMille translate3d forces the browser to use GPU acceleration. We omit this error by forcing the browser to use a different way of rendering. As it seems, that bug with incorrect rendering only occurs in the software renderer part. – maszynka Sep 14 '22 at 21:28