Clever Geek Handbook

Chrome Box-Shadow display error combined with bounding radius

I am using chrome Version 39.0.2171.71m on windows 7. I am getting weird window shadow display error when combined with border-radius:

http://jsfiddle.net/54tLcje5/

HTML:
<div id="layer_content_wrapper">
</div>

CSS:
body {
    background-color: black;
}

#layer_content_wrapper {
    position: absolute;
    z-index: 100;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
    left: 50%;
    margin-left: -150px;
    top: 60px;
    -webkit-border-radius: 150px;
    -webkit-box-shadow: 0px 0px 300px 100px red;
}

http://i.imgur.com/yEQFlo1.png

Is there a workaround? Am I doing something wrong?

The display error didn't occur 3 months ago ... it must have something to do with something that changed in chrome. I had a page running for almost 2 years with this shadow box until an error occurred.

Thank...

+2


source to share


1 answer


try using this css:

-webkit-box-shadow: 0px 0px 140px 100px rgba(255, 0, 0, 0.6) !important;

where the horizontal and vertical length is 0px, the blur radius is 300px to 140px, the spear radius is 100px and the rgba color (with alpha channel down to 0.6) is for the chrome problem gimmick and has the same result as other browser



you can use this for cross browser:

-webkit-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);
-moz-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);
box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);
0


source






More articles:


All Articles