css - Chrome，css 过滤器在子项处模糊和缩放，并隐藏在父项上的溢出导致发光的边缘

Question

父 div 有 overflow:hidden，子元素在 :hover 上缩放和blured， 有过渡。在设置动画时，您可以看到发光的边缘(我严格使用 transform:scale() 来避免这种情况，但情况会变得更糟)。
我使用的是 Chrome 39.0.2171.99 m。

JSFiddle

<div class="overflow">
    <div class="inner">
        Hover
    </div>
</div>

.overflow{
    width: 200px;
    height: 200px;
    overflow: hidden;

}
.inner{
    width: 100%;
    height: 100%;
    background: green;
    transform: scale(1);
    filter: blur(0px);
    transition: all 0.5s ease-in-out;
}
.overflow:hover .inner{
    transform: scale(1.1);
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

Answer 1

它是 chrome 有水垢和溢出的 BUG。

对于具有( overflow:hidden )的容器添加

position:relative;
z-index:1;