WebKit模糊过渡与定位元素

Question

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

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

我目前正在使用

-webkit-filter: initial;
filter: initial;

以设置初始"未模糊"状态。

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

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

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

Answer 1

对我来说

看起来像一个错误，可能会在浏览器的未来版本中得到解决。

同时，我使用 3d 技巧修复了它，转换：翻译Z（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);
}

小提琴