CODEWITHSUNDEEP
google-chrome
Tom910
Tom910

Reputation: 125

Chrome box-shadow bugs

Faced with a bug in google chrome 45.0.2454.46 beta (64-bit) and mac os 10.11, the shadow becomes cubes. Any idea how to fix? If you reduce the size of the shadow, the bug disappears.

Chrome - Chrome bug Firefox - Firefox normal

.list-shadow__box {
    width: 400px;
    margin: 0 auto;
}
.list-shadow__images {
    position: relative;
    overflow: hidden;
    height: 250px;
}    
.list-shadow__images:before {
    content: '';
    position: absolute;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transition: -webkit-box-shadow .4s;
    -moz-transition: box-shadow .4s;
    -o-transition: box-shadow .4s;
    transition: box-shadow .4s;
}
.list-shadow__box .list-shadow__images:before {
    box-shadow: 0 0 200px 100px #616060;
}
<div class="list-shadow__box">
    <div class="list-shadow__images"></div>
</div>

demo - http://codepen.io/anon/pen/zGVoYe

Upvotes: 1

Views: 220

Answers (1)

gmo
gmo

Reputation: 9000

Remove overflow:hidden in .list-shadow__images... your shadow is bigger than the div size...
That's why its look like a square.

.list-shadow__box {
    width: 400px;
    margin: 0 auto;
}
.list-shadow__images {
    position: relative;
    /*overflow: hidden;*/
    height: 250px;
}    
.list-shadow__images:before {
    content: '';
    position: absolute;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transition: -webkit-box-shadow .4s;
    -moz-transition: box-shadow .4s;
    -o-transition: box-shadow .4s;
    transition: box-shadow .4s;
}
.list-shadow__box .list-shadow__images:before {
    box-shadow: 0 0 200px 100px #616060;
}
<div class="list-shadow__box">
    <div class="list-shadow__images"></div>
</div>

Modified demo: http://codepen.io/anon/pen/XbLNEv

Upvotes: 1

Related Questions