webkit-filter打破溢出:隐藏

Question

我似乎遇到了谷歌Chrome 27中引入的一个奇怪的渲染错误.

如果你有一个带有webkit-filter和子元素的容器overflow: hidden,那个元素里面的溢出内容将不会按预期隐藏,这可以在这个测试用例中看到.

关于如何解决这个bug的任何想法？我特别需要drop-shadow/box-shadow(分别是webkit和mozilla)来处理表行,这就是我在测试用例中拥有它的原因.

Answer 1

哇,这一个永远.所以你是对的,当一个webkit过滤器应用于PARENT元素时,Chrome 27有一个溢出属性的错误.

所以...如果你将过滤器应用于你应用溢出属性的同一元素,它将起作用.

http://jsfiddle.net/P3ysJ/8/

.bar {
    position: relative;
    width: 11px;
    height: 8px;
    -webkit-filter: blur(0px);
    overflow: hidden;
}