Question

我正在重新设计我的一个网站。我使用CSS模糊过滤器：

.blur {
   blur(5px);
   -webkit-filter: blur(5px);
}

和一些CSS动画

.animate-blur {
   transition: 0.45s all ease-out;
}

为这些模糊样式的开启和关闭设置动画。转弯是由这个脚本完成的：

jQuery(function(){
    jQuery("article").hover(function(){
        jQuery("article").not(this).addClass("blur");
    },function(){
        jQuery("article").removeClass("blur");
    })
    jQuery(".sitename").hover(function(){
        jQuery("article").addClass("blur");
        jQuery("#background-top,#background-bottom").removeClass("blur");
    },function(){
        jQuery("article").removeClass("blur");
        jQuery("#background-top,#background-bottom").addClass("blur");
    })
});

这一切顺利，直到我升级到Mavericks和新的Safari。现在，有时文章完全消失，或文本背后有一个奇怪的阴影。

所以我的问题是。（你可以重现这个吗？并且......）有人知道我能解决这个问题吗？

Answer 1

我解决了我的问题，虽然我不太确定我是怎么做的。我对标记做了一些更改（我不确定其中哪一个解决了问题）：

不再使用引导网格，现在没有位置样式应用于父div
将overflow: hidden;添加到父div
从受影响的div中删除了一个clearfix
浮动侧栏（即使我不认为这是相关的）

...希望这可能对某人有所帮助。

Answer 2

除了作者提出的解决方案，css属性“will-change”可以帮到你。它允许您吸引额外的系统资源来播放动画。

Safari模糊了奇怪的bug

2 个答案: