Wednesday, July 30, 2014

Fixing jQuery Animate Flickering

I just spent over a hour wrestling with this bug, and I'm hoping this post will help spare someone else the same pain.

The problem that I ran into was an annoying flicker when using the jQuery .animate() function to change the opacity of a DOM node.  I did a bunch of Googling, but none of the solutions worked for me. I tried:


What ended up working for me was removing a CSS transition from the element being animated.  

The code in question (simplified):

listing.animate({opacity: 0}, function() {
    // some code
});


The listing element had the following CSS rules applied (simplified by removing vendor prefixes):
.listing-card {
        background: #fff;
        position: relative;
        border: 1px solid #ececec;
        border-radius: 3px;
        box-sizing: border-box;
        transition: all .1s;
        margin-bottom: 26px;
}

I deleted the transition and the flickering went away completely.

If none of these solutions work for you, I suggest doing the following to troubleshoot your specific issue:

  • Make a button on the page that toggles your animation back and forth.
  • Open up Chrome DevTools, and start deleting HTML, testing the animation with the button after each deletion until you have a minimal test case.
  • Now start turning off CSS rules in DevTools until the animation works smoothly without flickering

Hopefully this helps someone else avoid a few hours of debugging!