我有一个获得以下内容的元素:
-webkit-filter: blur(15px) contrast(120%) brightness(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;
(或任何溢出声明),然后执行任何时,它就会出现问题,并且过滤器会对元素产生奇怪的影响。在这个例子中,我稍微滚动了一下照片:
正如你所看到的......出了点问题。我知道将过滤器应用于后台然后将内容移到其上面对于浏览器来说可能非常困难,这也许就是它发生的原因。我想知道的是,是否有人找到了工作方式。
非常感谢任何建议。
修改
这是我演示的问题:http://jsfiddle.net/d8THd/1/
修改2
这是一个视频! https://www.dropbox.com/s/cmop991qud7np6i/BlurJank.mov