title: Webkit filters not playing nicely with overflows
body: <p>I've got an element that gets the following:</p>
  
  <p><code>-webkit-filter: blur(15px) contrast(120%) brightness(110%);</code></p>
  
  <p>I have another element that overlays it with a little area to scroll some photos - in the end, it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/eIaRv.png" alt="enter image description here"></p>
  
  <p>In order to scroll the photos horizontally, I use the following CSS:</p>
  
  <pre><code>  .photos {
      height: 110px;
      overflow-x: scroll;
      white-space: nowrap;
  
      img {
        height: 100%;
        width: auto;
        display: inline-block;
        border-radius: 4px;
        margin-right: 5px;
      }
    }
  </code></pre>
  
  <p>The problem I am having is that when I apply <code>overflow-x: scroll;</code> (or any overflow declaration) and then do <em>anything</em> it janks and the filter gets all weird with the elements. In this example, I've scrolled the photos a little:</p>
  
  <p><img src="https://i.stack.imgur.com/70qfw.png" alt="enter image description here"></p>
  
  <p>As you can see... something goes wrong. I understand that applying a filter to the background and then moving content overtop of it is probably pretty tough for the browser to do, and this is perhaps why it's happening. What I'm wondering is if anyone has found a way for it to work.</p>
  
  <p>Any advice is much appreciated.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is a fiddle I made up demonstrating the problem: <a href="http://jsfiddle.net/d8THd/1/" rel="nofollow noreferrer">http://jsfiddle.net/d8THd/1/</a></p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>Here's a video! <a href="https://www.dropbox.com/s/cmop991qud7np6i/BlurJank.mov" rel="nofollow noreferrer">https://www.dropbox.com/s/cmop991qud7np6i/BlurJank.mov</a></p>