Chrome box-shadow bug

Question

面对Google Chrome 45.0.2454.46 beta（64位）和mac os 10.11中的错误，阴影变成了多维数据集。知道怎么解决？如果减小阴影的大小，则错误消失。

Chrome - Firefox -

＆＃13;

＆＃13;

com.hazelcast:instance=_hzInstance_1_dev,type=IMap,name=myMap

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

演示 - http://codepen.io/anon/pen/zGVoYe

Answer 1

删除overflow:hidden中的.list-shadow__images ... shadow 大于div大小...
这就是为什么它看起来像一个正方形。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="list-shadow__box">
    <div class="list-shadow__images"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改演示：http://codepen.io/anon/pen/XbLNEv