box-shadow and border rendering bug

Question

Css causing the "bug":

div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}

It looks like there is some kind of 1px transparent border between the inset box-shadow and the surrounding border.

Have a look at this live example, i could reproduce that rendering weirdness with the last releases of Chrome, Firefox and IE. (thus not rendering engine-dependent)

And it doesn't happen with a lower border-radius (in other words, it doesn't happen when the shape is not a circle)

EDIT:

I didn't find a way to make this thing go away, but using a low opacity makes it almost invisible. I'll be using that technique (and leaving the question open) until a real solution comes up.

Espionage

Answer 1

Definitely looks like a bug in box-shadow (when using the spread arg). As a work-around just use an overlay div. Here's the code:

html:

<div></div>
<div class="overlay"></div>

css:

div {
    margin:10px;
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}
div.overlay {
    margin-top:-310px;
}

Here's the fiddle: http://jsfiddle.net/eX3cy/1/

Edit:

Here's a fiddle with the blur and spread adjusted as well (to show that identical results, minus the unwanted parts, can be achieved): http://jsfiddle.net/wgpzL/

Valerlan

Yeah that's not exactly what i'd call a work around, even if the bug is less visible. And if that can help, it's not related to the spread, the same effect can be achieved by using four shadows, one for each corner: box-shadow: 15px 0 15px #000 inset, -15px 0 15px #000 inset, 0 15px 15px #000 inset, 0 -15px 15px #000 inset (and the bug is still here, without using any spread) – Espionage

@Pioul Only trying to say that, in the example you gave, setting the spread to 0 made the line disappear. The cause of the bug is for the browser developers to diagnos/fix. All we can do is work with what we have. In this case the code above produces the same result as your code, without the undesired line/circle. That's as good as it gets unless/until browsers are updated to change the behavior. – Valerlan

Oh yeah, agreed for the spread thing. But the coode you gave doesnt produce a bug-free effect, it just makes it less visible (but it's still here, and is still disturbing me - i know, i'm annoying :D). One other way of making it less visible is to use a much lighter color (like #eee if the background is #fff). But yeah, the bug's still here :/ – Espionage

Wow didnt see your edit, nice one. But sadly the fix loses its effect as soon as we add opacity to the equation :/ – Espionage

Has anyone figured out a better workaround in the mean time? – Impassioned

Applying the transparency to the whole div compared to the background-color and box-shadow seems to solve the issue on Chrome. Is there a Firefox issue that tracks this bug? – Impassioned