css - webkit-filter breaks overflow: hidden

Question

It seems I've run across a weird rendering bug that was introduced in Google Chrome 27.

If you have a container with a webkit-filter and children element with overflow: hidden the overflowed content inside of that element won't be hidden as expected, as can be seen in this test case.

Any ideas on how to work around this bug? I especially need drop-shadow/box-shadow (webkit and mozilla respectively) to work on table rows which is why I have that in the test case.

Answer 1

哇，这个用了一辈子。所以你是对的，当 webkit 过滤器应用于 PARENT 元素时，Chrome 27 有一个溢出属性的错误。

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

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

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