Load & Scroll Extremely Laggy in Safari

Design help Animations & Interactions
1

Page in question — https://hbo-max-brand-portal.webflow.io/core-elements/logos

It has a page load interaction, the menu open / close interaction, a few hover animations on the side nav and buttons, and a bunch of Lottie animations throughout the page. They behave smoothly on Chrome & Firefox, but suffer terribly in Safari.

Chrome / Firefox (Smooth):

Safari (Super Laggy):

Has anyone seen this inconsistency and found a solution? Thanks!

Edit 3/2:

Read-only link: https://preview.webflow.com/preview/hbo-max-brand-portal?utm_medium=preview_link&utm_source=designer&utm_content=hbo-max-brand-portal&preview=e6edafa1e14e47b60b7a080a87e316de&workflow=preview

My thoughts so far:

  1. Seems like the primary issue is the Lottie Files. Possibly that they’re using masks / fitlers, which Webflow Support mentioned is documented as performing poorly in Safari. I removed all Lottie’s on Logos (Static) and it performs better, but there’s still issues with the download button collapses, side nav, and scrolling to anchor links via the side nav.
  2. With that in mind, the other issue may be animating auto dimensions. I use that technique for the side nav collapses and download button collapses.
  3. Worth noting, but on a page like the Changelog, where there are no Lotties, the IX2 intro animation seems to work fine.
  4. Also worth noting, there’s quite a bit of custom code on the Logos page:

  • Page load triggers a button click that triggers the intro animation

  • IntersectionObserver to collapse download buttons as you scroll

  • Route-based code to set the breadcrumb text / links

    Not sure if there’s a conflict with the amount of custom code, IX2 animations, and Lottie’s. Really hoping to find a solution without sacrificing any functionality, especially with it working well as is in Chrome / Firefox / mobile Chrome.

Edit #2, 3/2:

  • If the solution ends up being a basket of micro-improvements, I’m wondering if I should turn off all the Lottie playback within Webflow (right now they’re either permanently looping, or they start looping when scrolled in view), and add an IntersectionObserver to start / stop Lottie’s when they’re in view, so there’s only a handful playing at once.
2

You could opt to do IX2 or Lottie. The combination sometimes causes issues on Safari. If I had both as a requirement and needed to do fault isolation, I would probably clone the site locally to start where it would be easier to control what is loaded and test.

1 Like
3

Thanks Jeff—cloning locally is a good idea. I duplicated the page and removed Lottie’s at Logos (Static) and it is performing better, but not great. Added more details on this in my edit above.

4

This is still an issue, despite adding as many micro-improvements as I can think of. I think the biggest performance hit is background-filter: blur, which Safari doesn’t handle well at all. However, taking that out, and there is still noticeable lag:

  • On page-load, when the menu curtain animates upward
  • On manual scroll-down, when the nav collapses and the side nav links change
  • And especially on anchor link scrolls, when you click the side nav and it uses Webflow / jQuery’s scrollTo, it’s extremely choppy.

Feeling lost on what else to try, especially after some experiments:

  • I disabled the background-filters, but the anchor link scrollTo is still extremely choppy.

  • I removed the expand / collapse functionality of the side nav links, and the anchor link scrollTo is still extremely choppy.

5

@cyberdave I saw you investigating a similar issue—any chance you’ve found techniques for improving animation performance in Safari?

6

Experienced similar issues.
After I changed the Lottie settings from SVG to CANVAS the performance improved drastically.