webkit-filter中断溢出:隐藏 [英] webkit-filter breaks overflow: hidden

问题描述

似乎我遇到了Google Chrome 27中引入的怪异的渲染错误.

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

如果您有一个带有 webkit-filter 的容器和带有 overflow:hidden 的子元素，那么该元素内部的溢出内容将不会按预期被隐藏，因为可以在此测试用例中看到.

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.

关于如何解决此错误的任何想法?我特别需要drop-shadow/box-shadow(分别为webkit和mozilla)来处理表行，这就是为什么我在测试用例中使用它.

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.

推荐答案

哇，这花了很长时间.没错，当将Webkit过滤器应用于PARENT元素时，Chrome 27的溢出属性存在错误.

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.

所以...如果将过滤器应用于与将overflow属性应用于相同的元素，它将起作用.

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;
}

这篇关于webkit-filter中断溢出:隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！