.scroll() function positioning flickering in google chrome after its last update

Question

to be honest, i'm a little bit desperate.

After my Google Chrome Browser updated – from i think Version 39 to 41 – one of my clients websites is absolutely disfigured in Chrome.

You can see it here: http://prinovis-media-day.com/

If you scroll down, all the »parallax« elements are flickering. I've checked it on my macbook on Version 39 — it's absolutely fine in Version 39.

Basically, what i'm doing to create this effect is very simple:

$("window").scroll(function(){

     var move_value = Math.round(scroll_top * 0.3);
     var opacity_value = *some other value*;

     $(".parallax-container__content").css({

        'opacity': opacity_value,
        'padding-top': move_value +'px'

     });

});

Does anyone know whats the matter? It worked like a charm before this update...

Thanks a lot in advance, i really appreciate any answer!

Answer 1

Moving my comments to be an answer:

You could always cache the $(".parallax-container__content") element in a variable so that it is not retrieving it on every time the scroll event is fired, and that goes for the opacity value too (unless that is dynamically changing depending on scroll_tp. Doing this might cause the script to speed up and help the jank that is happening

If it is still really noticeable, then you could use feature detection to detect if CSS transforms are supported in the browser and user 'transform: translate' instead of changing the 'top' value. If it is not supported, then just revert back to changing the 'top'. Changing the 'top' causes a repaint in the browser while 'translate' does not. This repaint is quite expensive to the browser and can cause jank on certain machines. modernizr.com can help you out with feature detection, but it is potentially overkill for just helping out in the this situation.

Have a look at this for detecting cetain styles are supported: http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/

this is the easiest way to check (remember to account for vendor prefixes).