Css Webkit过滤器不能很好地处理溢出

我得到了一个元素，它得到以下内容：

-webkit过滤器：模糊15px对比度120%亮度110%

我有另一个元素，它覆盖了一个小区域来滚动一些照片-最后，它看起来像这样：

为了水平滚动照片，我使用以下CSS：

  .photos {
    height: 110px;
    overflow-x: scroll;
    white-space: nowrap;

    img {
      height: 100%;
      width: auto;
      display: inline-block;
      border-radius: 4px;
      margin-right: 5px;
    }
  }

我遇到的问题是，当我应用overflow-x:scroll时；或者任何溢出声明，然后执行任何它会发出刺耳声音的操作，过滤器会对元素产生奇怪的效果。在本例中，我稍微滚动了一下照片：

正如你所看到的。。。出了点问题。我明白，对浏览器来说，在背景上应用一个过滤器，然后在上面移动内容可能非常困难，这也许就是为什么会发生这种情况。我想知道的是，是否有人找到了让它工作的方法

任何建议都将不胜感激

编辑

这是我编的一把小提琴，用来演示这个问题：

编辑2

---

这是一个视频

你能把你的完整密码/提琴贴出来吗？另外，将过滤器直接应用于照片本身是否有效？我很快就试过了，虽然过滤器总是有点不稳定，但似乎大部分都起作用了。@RyanMitchell我用小提琴演示更新了这个问题-我想我的问题有点误解；实际上是背景获得了过滤器，而不是顶部图像。非常感谢您的帮助！谢谢你的小提琴；这更有道理。我看不出最新的Chrome36 Windows版有什么问题。你在哪个Webkit浏览器中发现了问题？我在Mac上运行Chrome 36-下面是一段视频，说明了发生了什么：看视频，错误似乎发生在不透明度小于1的地方，比如bg、滚动条、，等等-这似乎是一个渲染错误，它错误计算了非不透明内容下面的颜色值。我不确定解决方案是什么，但是我能提供的只是一个小小的安慰，你的Windows Chrome用户不会遇到这个bug。