CODEWITHSUNDEEP
csssafari
idmean
idmean

Reputation: 14865

Safari blurs strange bugs

I'm currently redesigning one of my sites. I using the CSS blur filter:

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

and some CSS animation

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

to animate the turn on and off these blur styles. The turning is done by this script:

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");
    })
});

That worked all well until I upgraded to Mavericks and the new Safari. Now sometimes the articles completely disappear or there is a strange shadow behind the text.

So my question is. (Can you reproduce this? And...) Does anybody know if I can fix this?

Upvotes: 4

Views: 3352

Answers (3)

dylanhu
dylanhu

Reputation: 131

As StopLogic mentioned, the will-change CSS property fixes this bug. Use will-change: filter on the blurred element.

Upvotes: 6

StopLogic
StopLogic

Reputation: 61

In addition to the solutions proposed by the author, the css property "will-change" can help you. It allows you to attract additional system resources to play the animation.

Upvotes: 6

idmean
idmean

Reputation: 14865

I resolved my problem, although I'm not quite sure how I did. I made some changes to the mark up (I'm not sure which of these solved the problem):

  • no longer using the bootstrap grid, now no position style is applied to the parent div
  • added overflow: hidden; to the parent div
  • removed a clearfix out of the affected divs
  • floating the sidebar (even I don't think this is relevant)

...in the hope this will probably help somebody.

Upvotes: 3

Related Questions