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

Wow, this one took forever. So you're right, Chrome 27 has a bug with the overflow property when a webkit filter is applied to a PARENT element.

so... if you apply a filter to the same element that you apply the overflow property to, it will work.

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

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