CSS模糊过滤器在滚动和悬停时中断

Question

第一次发帖 - 我到处寻找解决方案，希望你们能提供帮助！我在使用 CSS 模糊滤镜时遇到问题。我创建了一个磨砂玻璃效果（类似于 ios7 设置菜单效果）来在我的网站上提供覆盖。我注意到，每当我与上面的元素交互时，模糊 div 顶部的透明 div 就会中断（在照片 #1 中，它悬停在可点击的图标上）。当导航覆盖和揭开滚动上的 div（照片2）时，它还会产生破坏效果的水平线。问题似乎出在“.blur” div 本身，因为当我删除“.overview_text”文本透明度覆盖时，我仍然在滚动时看到相同的行为。这是 webkit 过滤器本身的错误，还是我做错了什么？关于可能导致这种情况以及如何防止这种情况发生的任何想法？提前致谢。

图片1：http://cl.ly/image/2v3p3P0r3d1y 图二：http://cl.ly/image/2H091L2l1K2c

相关的html.erb

<div class="plan_overview span10 offset1">
  <%= image_tag plan.cover_photo, class: "panzoom-elements" %>
  <div class="blur span3">
     <%= image_tag plan.cover_photo %>
  </div>
<div class= "overview_text span3">
    ...took out content code here...
</div>

css.scss 文件

.plan_overview {
  height: 400px;
  background: $gray;
  z-index: 2;
  margin-top:10px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #979797;
  img{
    position:absolute;
    overflow: hidden;
  }
}
.blur{
  position: absolute;
  @include box_sizing;
  z-index: 2;
  height: 400px;
  width: 300px;
  margin-left:0px;
  padding:0;
  background-color: white;
  img{
    z-index: 2;
    position: absolute;
    height:420px;
    width: 350px;
    left: 0;
    margin: -1px;
    overflow: hidden;
    filter: blur(30px);
      -webkit-filter: blur(30px);
      -moz-filter: blur(30px);
      -o-filter: blur(30px);
      -ms-filter: blur(30px);
  }
}

.overview_text {
  background: rgb(250, 250, 250); /* Fall-back for browsers that don't support rgba */
  background: rgba(240, 240, 240, .5);
  position: absolute;
  margin-left: 0;
  border-right: 1px solid #979797;
  z-index: 10;
  padding: 5px;
  color: white;
  font-family: AvenirNextCondensed-Regular;
  word-break: normal;   
  word-wrap: break-word;      /* IE */
  height: 400px;
  width: 300px;
  font-size: 18px;
  line-height: 25px;
  float: left;
  .title {
    z-index: 301;
    font-family: AvenirNextCondensed-Bold;
    font-size: 20px;
    line-height: 27px;
  }
}

Answer 1

对于将来需要解决方案的任何人，我能够通过强制硬件加速来解决这个问题。将此添加到我的 .blur css 中：

-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Answer 2

我无法使用 Chrome 30 重现此问题。我使用了您的代码并且运行正常：http://cdpn.io/ilgsJ

也许您可以发布一个 codepen 或 JSFiddler？

CSS 过滤器仍处于试验阶段，很有可能无法按预期方式工作。除非您的目标是进行实验，否则现在避免使用它。