WOW makes smooth scrolling flicker

[rickmacgillis]

First, I want to say that it's awesome that you built WOW.js. It's perfect for what I need, but I just have one issue with it. WOW.js makes my smooth scrolling flicker no matter how I implement smooth scrolling and my guess is that it's due to the event.preventDefault() not being allowed to execute properly. The code below is the simplest implementation of smooth scrolling I've tried.

 $('a').click(function(event) {
     event.preventDefault();
     var offset = $($(this).attr('href')).offset().top - 62;
     $('html, body').animate({scrollTop: offset}, 1000);
 });

[fricke]

Try adding:

will-change: top; to the html, body style in your CSS which will turn on hardware acceleration (or the translate3d hack transform: translate3d(0, 0, 0);, with the appropriate vendor prefix).

Might help.

[fricke]

here's a reference, with a little more info as well for backface-visibility and perspective

http://davidwalsh.name/translate3d

[fricke]

My bad, I just realized for this particular case it won't work since you are using Javascript, this is a CSS solution. I'd go to this and start profiling your page and see where the problem is at. There's so much going on with using jquery (or any JS library to animate) vs pure CSS3. You may have something else going on here or it may simply just be jquery as the culprit

http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

worth a look, instead of trying to guess as to what is causing the flickering.

[rickmacgillis]

Crap. I forgot to update this. The problem was that I had two things trying to scroll the page and I didn't realize it. It wasn't WOW.js. When one tried to scroll it, the other blocked it and then tried to scroll it, causing the flicker.

[matthieua]

Thanks @cozylife for updating the thread. Closing the issue now :)