jquery - 带有定位元素的 webkit 模糊过渡

Question

我试图在单击按钮时创建模糊/非模糊过渡。

我已经设法让这个在基本元素上工作，但是一旦我向元素添加任何类型的定位，unblur 就会停止工作。我创建了一个 jsfiddle 来展示这个 http://jsfiddle.net/NLpRy/

我正在使用

-webkit-filter: initial;
filter: initial;

设置初始的“未模糊”状态。

使用定位元素时过滤器是否存在错误？

注意:我已经尝试了以下代码，虽然它确实有效，但我不能将它用作解决方案，因为它会破坏我在其他地方的其他动画。

-webkit-filter: blur(0);
filter: blur(0);

Answer 1

在我看来这像是一个错误，可能会在浏览器的某个 future 版本中得到解决。

与此同时，我使用 3d 技巧 transform: translateZ(0px); 修复了它

.page {
    -webkit-filter: none;
    filter: none;
    position: relative;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 1.3s ease-out;
    -o-transition: all 1.3s ease-out;
    transition: all 3s ease-out;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}

fiddle