Chrome CSS模糊过滤器通过模态流血答案

【问题标题】：Chrome CSS blur filter bleeding through modalsChrome CSS模糊过滤器通过模态流血
【发布时间】：2014-09-01 03:23:48
【问题描述】：

我在我的应用程序中对图像使用 webkit 模糊过滤器。在 Chrome 上（据我所知，只有 Chrome），每当我弹出一个模态并在模态中的任何内容上执行某种鼠标悬停事件时，图像的模糊似乎会通过模态渗出，好像模糊滤镜上的 z-index 更大（尽管我知道不是）。

以前有没有其他人遇到过这个问题？我用谷歌搜索了它，找不到任何关于它的信息。

【问题讨论】：

【解决方案1】：

我知道这是一个老问题，但这是我解决出血问题的方法。请参阅plunk。

关键部分是使用

-webkit-transform: translate3d(0, 0, 0);
overflow: hidden

【讨论】：

【解决方案2】：

这里只是一个长镜头，但也许尝试添加一个溢出：隐藏到它溢出的元素 - 以及设置的宽度和高度 (http://jsfiddle.net/kerr325/o9mkpme9/)：

.your-element {
    height:120px;
    width:200px;
    overflow:hidden;
}

【讨论】：