Page in question — 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!
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:
- 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.
- With that in mind, the other issue may be animating
autodimensions. I use that technique for the side nav collapses and download button collapses.
- Worth noting, but on a page like the Changelog, where there are no Lotties, the IX2 intro animation seems to work fine.
- 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.