CSS3 Blur effect causes weird shadows on hover

Question

I got an html page where there is a DIV element covering the whole background with a background image, This DIV has also Blurred css3 effect on it.

When ever i hover on elements that sit above the blurred div i get alot of weird shadow bugs happening.

Chrome on OSX.

Attached screenshot:

Here is my background css:

#background {
    -webkit-transform: translate3d(0,0,0);
    background-repeat: no-repeat !important;
    background-position: center  !important;
    background-attachment: center fixed;
    -webkit-transform: scale(1.1);
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -1;
    box-shadow: inset 0px 0px 230px 75px rgba(0,0,0,0.8);
    overflow: hidden;
    -webkit-transition: -webkit-filter 0.4s ease-in-out;
}

.backgroundblur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Answer 1

Maybe you could load your HTML with this sample. But I guess that problem is in #background element, coz there's shadow applied on it, and it look like your content is in that element also.

I tried to produce similar effect on <http://jsfiddle.net/zlajaa1/4s941ewz/> . Problem here is negative z-index value. So maybe you can try to play with that property also.

For more help, attach HTML with this please.