CSS blur filters breaking on scroll and hover

Question

First time poster - I've looked everywhere for a solution and I'm hoping you guys can help! I'm having problems when using CSS blur filters. I have created a frosted glass effect (kind of similar to the ios7 settings menu effect) to provide an overlay on my site. I've noticed that the transparent div on top of the blurred div breaks whenever I interact with an element on it (in photo #1 hovering over a clickable icon). It also incurs horizontal lines breaking the effect when the nav covers and the uncovers the div on scroll (photo2). The trouble seems to be with the ".blur" div itself as I still see the same behavior on scroll when I remove the ".overview_text" text transparency overlay. Is this a bug with webkit filters itself, or something I've done wrong? Any ideas out there as to what might be causing this and how to prevent it from happening? Thanks in advance.

Image1: http://cl.ly/image/2v3p3P0r3d1y Image2: http://cl.ly/image/2H091L2l1K2c

Relevant 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 file

.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

For anyone needing a solution in the future, I was able to solve this problem by forcing hardware acceleration. Added this to my .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

I couldn't reproduce this problem using Chrome 30. I used your code and it worked ok: http://cdpn.io/ilgsJ

Maybe you could post a codepen or a JSFiddler?

CSS filters are still experimental and have big chances to not work the way it was meant to. Avoid it by now unless your goal is to experiment.