Question

I’m having a problem with my animations flickering upon completion. I’m using a mix of jQuery and CSS to slide divs, and my problem seems unique to me. The exact problem consists of sliding a 200% width div 50% left and right, using $("element").css("transform","translate(-50%,0px)"); in jQuery and transition:all 0.43s ease-in-out; in the CSS (all proper browser prefixes are iterated as necessary).

The animation takes place flawlessly until the point of completion, and then for a split second it flashes the original state, and then back to the transitioned state. Except for the flicker of the original state instead of the transitioned state for about 0.001 seconds, that code works exactly as planned.

An especially odd side-occurrence is that I have (custom JS, not actual) dropdowns in both states, which jQuery closes before the sliding animation takes place, but when the flicker takes place, it shows the dropdown still expanded. When sliding back, the dropdown is closed as it should be. These previously worked together flawlessly, and I haven’t touched either piece of code today.

It’s literally like it’s taking a screenshot of what the page state was before the animation, doing exactly what I want it to do, and then flashing the screenshot of the before state to taunt me deliberately.

I can’t post a JSfiddle unfortunately, because I can’t reproduce the problem in isolation, and I’m quite certain that my employer would not like me to post the entire code here. I’m sorry I can’t provide more. Thanks for any help you can give.

(To any wondering, I’ve looked at quite a few other examples where
overflow:hidden on the parent element will stop certain animations
from flickering and jumping to their final positions without animating
the last bit. But that’s not what’s happening here. I have had that
problem before myself, and this is not it).

**Update: Upon further examination, this problem only takes place in Chrome, not in Safari or Firefox. I updated Chrome to 18.0.1025.142 today, and that may be the problem.

Answer 1

The solution to one of my problems had to do with browser-supplied gradients on un-styled form objects propagating for the full width and height of the page (even when on a lower z-index than other elements they were hidden behind) due to a “variable not found” error in my JavaScript. Once I defined the Javascript variable before calling it with jQuery, the strange gradients disappeared. I can only chalk up the weird behavior to improper parsing based on not being able to find the variable it wanted. Even though it seemed completely unrelated, it was the right solution.