css - Bug in Chrome: render big box-shadow -

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

in google chrome (last version, windows & ubuntu) see strange squares-artefacts. in firefox normal shadow.

jsfiddle: http://jsfiddle.net/2grgf/1/ (from how create box-shadow covers entire page?)

is there workarounds?

you can emulate inset box-shadow using filters. 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 modern browsers except ie (all of them). may use conditional rules them. so, must work @ least in ie9+: http://jsfiddle.net/igoradamenko/yywuhx3p/