Box-Shadow and Border-Radius Bug in Chrome

Box-shadow and border-radius bug in Chrome

It looks like a known bug:

http://code.google.com/p/chromium/issues/detail?id=29427

Check out the bug discussion, you may find a workaround. Definitely Star this bug if you want it to be fixed sooner!

Strange CSS drop-shadow bug in Chrome only?

I managed to get the same result in specific window sizes.

I played around a little bit and what seemed to cancel this issue was removing the border-radius definition from the .set-container class definition.

I am not sure why it worked, but I have seen in my experience that shadows and border-radiuses sometimes have issues. You could consider restructuring that part or just removing the border-radius.

Just as additional info, I was able to reproduce the issue on:

Chrome 83.0.4103.61 (64-bit)

Window size: 936 <= Width < 1200 and 701 < Height < 763.

I am not sure if there's something specific about those dimensions in your case, but that's where I seem to get the extra shadow.

UPDATE

I did test something else that does not have issues (as far as I am aware) with the border-radius.

I switched from box-shadow to filter: drop-shadow. The end result is this line:

filter: drop-shadow(0 70px 70px black);

It looks a little bit different than the box-shadow rule, but does the trick and doesn't have issues with the border-radius.

Chrome bug display lines with box shadow

I had a similar issue in Chrome, where changes in the box-shadow on an input with :focus state would 90% of the time show a line underneath it: input bug with box-shadow

What fixed it for me was adding position:relative to the element with the box-shadow property.

Bug in Chrome: render big box-shadow

You can emulate inset box-shadow using filters. Like this: http://jsfiddle.net/igoradamenko/vmeortsf/

HTML:

<div class="shadow">
    <div class="blurred"></div>
</div>

CSS:

.shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: #555;
}

.blurred {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    width: 60%;
    height: 60%;
    border-radius: 50%;

    background: #fff;
    -webkit-filter: blur(100px);
    filter: blur(100px);
}

Today filters supported by all modern browsers except IE (all of them). But you may use conditional rules for them. So, it must work at least in IE9+: http://jsfiddle.net/igoradamenko/yywuhx3p/

inset box-shadow visual-artifacts in google chrome

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.

---

Related Topics