CODEWITHSUNDEEP
cssgoogle-chrome
LevChurakov
LevChurakov

Reputation: 113

Bug in Chrome: render big box-shadow

I just want to set box-shadow of div to: ... 0 0 500px ... (big blur value).

In Google Chrome (last version, windows & ubuntu) I see strange squares-artefacts. In Firefox I get just a normal shadow.

JSFiddle: http://jsfiddle.net/2GRGF/1/ (from How to create a box-shadow that covers the entire page?)

Is there any workarounds?

Box-shadow bug in chrome

Upvotes: 1

Views: 1237

Answers (2)

Igor Adamenko
Igor Adamenko

Reputation: 878

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/

Upvotes: 1

ѺȐeallү
ѺȐeallү

Reputation: 3017

Your blur-radius is too big.

Although I don't think this is a good idea as @LevChurakov alluded to...

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 215px #000000;
    box-shadow: inset 0px 0px 215px #000000;
}

Upvotes: 0

Related Questions