CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide

Question

You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo

Answer 1

First of all, thanks to the great solutions offered here. I always thought in the past there must be something wrong with my code. It wasn’t. I also reasoned out the 2000px border for animations not running smoothly any longer. Thanks to you guys I now add

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}  

I did this conditionally because, in fact, pictures don’t render antialiased after adding the class. At another place I did

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}  

and added and removed the additional class via JQuery. So the transitions are smooth and render after finished (removing the class again) A little complicated but it worked fine for me and finally makes animations in Safari above 2000px smooth. Great job, guys!!