Chrome，css过滤器模糊和儿童缩放以及隐藏在父级上的溢出结果发光边缘

Question

父div有overflow:hidden，子元素缩放且 blured :hover，带有转换 。动画时你可以看到发光的边缘（我严格使用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

发光的边缘是由于绿色背景模糊 - 产生一种褪色的边缘效果。您可以将background: green样式移至.overflow DIV来解决此问题。现在，规模变换似乎也没有必要。

<强> JSFIDDLE

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

修改
如果您的内容是HTML（非纯色背景），则会增加一些复杂性。我一直遇到一个问题，在过渡过程中模糊被应用到可见区域，然后在过渡结束后模糊应用于整个图像......奇怪的行为，但据我所知，这是不可避免的。我能够通过堆叠两个对象并使用背景图像设置两个对象来实现所需的效果，.back对象已经应用了模糊效果。任何文本或其他元素都可以直接放在.front DIV中，但是需要使用CSS background-image: url()应用全尺寸图像，并且必须比容器大20像素才能解决褪色的10px模糊效果边缘。希望这会帮助你。

<强> New JSFiddle example using image

<div class="overflow">
    <div class="back"></div>
    <div class="front">Hover</div>
</div>

.overflow {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.front,
.back {
    box-sizing: border-box;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 220px;
    height: 220px;
    padding: 10px;
    background-image: url(http://cache.graphicslib.viator.com/graphicslib/2982/SITours/tampa-bay-downtown-and-manatee-river-helicopter-tour-in-tampa-109952.jpg);
    background-size: 220px 220px;
    background-position: center center;
}
.front {
    z-index: 100;
    transition: all 0.5s ease-in-out;
}
.back {
    z-index: 50;
    filter: blur(10px);
    -webkit-filter: blur(10px);
}
.front:hover {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

<强> Alternate New JSfiddle example using HTML elements

Answer 2

它带有刻度和溢出的镀铬BUG。

对于具有（overflow：hidden）的容器 添加

position:relative;
z-index:1;