Safari blurs strange bugs

Question

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?

Answer 1

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.