webkit模糊过渡与定位元素

我试图创建一个模糊/ unblur过渡时，单击按钮。webkit模糊过渡与定位元素

我已经设法使这个基本元素工作，但只要我添加任何类型的定位到unblur停止工作的元素。我创建了一个的jsfiddle显示此 http://jsfiddle.net/NLpRy/

我目前使用

-webkit-filter: initial; 
filter: initial;

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

使用定位元素时，过滤器有错误吗？

注意：我已经尝试了下面的代码，虽然它能工作，但我不能将它用作解决方案，因为它会在其他地方打破我的其他动画。

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

来源

2014-02-20 kiwijus

看起来像我的错误，一定会得到解决了一些未来的浏览器版本。与此同时，我使用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

来源

2014-02-21 06:25:24 vals

哇，这是真棒！任何想法为什么添加translateZ修复它虽然？ – kiwijus

子元素没有模糊，它是页面。然后，浏览器必须将孩子的渲染链接到页面的渲染。不知何故，当你在这里使用它时，这在转换中失败了。使页面在3D空间中进行转换，还将儿童渲染链接到页面渲染，并且这不会失败 – vals

webkit模糊过渡与定位元素

回答

相关问题