Scroll interactions lagging on MacBook

Design help Animations & Interactions
1

Thanks in advance for your help.

Our site’s scrolling interactions lag badly only on the built-in displays of MacBooks running Chrome (v91.0.4472.114)

Same problem on multiple MacBooks.
Same problem in Incognito windows.
No problems in Safari.
No problems on external monitors (same computer).

I’m not sure whether the site is poorly built or there’s an issue with Chrome (or a combination of factors).

Would love to hear your thoughts.

Published site: https://canopy-website-e6d4a0cb99-55dc7223ca9bc.webflow.io/

Read-only: https://preview.webflow.com/preview/canopy-website-e6d4a0cb99-55dc7223ca9bc?utm_medium=preview_link&utm_source=designer&utm_content=canopy-website-e6d4a0cb99-55dc7223ca9bc&preview=eda7f83b88474df0951b05bdd59123e4&workflow=preview

2

I’ve seen this problem outside of Webflow, too, and I think it’s an affect of 1) the video having fluid dimensions 2) the browser having to process the video + white opacity.

Here are a few ideas to try. I hope these help:

  • Give the video a fixed width and height and center it inside a variable width/height frame
  • Figure out an alternative to fade-to-white
  • Keep the fade-to-white action, but detach it from scroll, so the browser has to work a little less to make it happen

Feel free to send a DM if you could use any help.

3

Are they running M series processors?

4

Thanks for asking, Sam. Tested on two Intel MacBooks (2017 and 2018)

5

Thanks for those suggestions @briansage . You were right about fade-to-white being a major factor. I’ve eliminated that for now. Much appreciated!

1 Like
6

Great! Glad that helped.