Question

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

图片1：http://cl.ly/image/2v3p3P0r3d1y 图2：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过滤器仍处于试验阶段，很有可能无法正常工作。除非你的目标是试验，否则现在就避免使用它。

CSS模糊过滤器在滚动和悬停时打破

2 个答案: