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

Question

to be honest, i'm a little desperate.

After updating the Google Chrome browser - from version 39 to 41 - one of the sites of my clients is absolutely disfigured in Chrome.

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

If you scroll down, all parallax items flicker. I tested this on my macbook in Version 39 - this is absolutely normal 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 what is the matter? It worked like a charm before this update ...

Thank you very much, I really appreciate any answer!

Answer 1

Moving my comments for an answer:

You can always cache the element $ (". Parallax-container__content") in a variable so that it does not retrieve it every time the event is fired, and this also applies to the opacity value (unless that changes dynamically depending on scroll_tp. This can lead to script to speed up and help what happens what happens

If this is still really noticeable, then you can use the detection function to determine whether CSS transforms are supported in the browser and the user "transform: translate" instead of changing the "upper" value. If this is not supported, then just go back to changing the "top". changes "top" causes a redraw in the browser, but "translate" - no. This redrawer is quite expensive for the browser and may cause some machines to freeze. modernizr.com may help you with the function but it is potentially redundant, just helping in this situation.

Look at this to find the cetain styles: http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/

this is the easiest way to check (do not forget to specify vendor prefixes).