wagerfield/parallax

Parallax animations moving really slow on Mac Chrome

paulstroot opened this issue · 6 comments

paulstroot commented

Anybody else experiencing the parallax animations moving super chunky and slowly? I'm only experiencing this on Mac Chrome v96/0

Here is an example:
https://stage.avhero.com/

I'd love if somebody would be able to help me troubleshoot this. Thank you!

My Script looks like this:

<script>    
    var thisScene = document.getElementById('elementID');
    var parallaxInstance = new Parallax(thisScene);
  </script>
reneroth commented

can confirm your implementation is super slow for me, but the regular demo page works fine ( https://matthew.wagerfield.com/parallax/ ) - guess you'll need to to some old school debugging :)

paulzz3000 commented

Works great here. Mac FF + Brave + Chrome

paulstroot commented

I did a little debugging, and it seems like it has to do with the size of the images and the browser having to animate it all. The animation gets smoother as I remove some of the large elements. Also, if I scale the browser window nice and small, shrinking down the graphics, things move smoothly, but if I stretch the browser to 1000px or more, it's choppy, so it clearly seems related to the browsers ability to redraw the animations.

I'm not sure why this works so smoothly on the demo page and not my page. Also, this used to work excellent and I only recently started to see this issue. Has there been any sort of update to google chrome on Mac that might have affected this? I'm stumped, but my client is really wanting me to get this fixed!

I've isolated this to a single page to demo the issue. (This page may only be visible temporarily)
https://www.avhero.com/test.html

reneroth commented

Only had a few minutes to check this out, but might put you on the right track:

  • add will-change: transform to the .city-layer class
  • try using PNG instead of SVG, maybe that's easier for the GPU to render
  • 👍1
paulstroot commented

Yes! The "will-change: transform" css style did the trick. I wasn't even aware of that style. This might be a good one to add to the documentation. Thank you for taking some time to check this out for me.

  • 👍2