Has anyone experienced inconsistent performance issues with Webflow page interactions, specifically on Safari? Some elements, such as Lottie animations, seem to behave smoothly on Chrome and Firefox but lag terribly on Safari. There are also issues with collapsing buttons, side nav, and scrolling to anchor links. Has anyone found a solution to address these inconsistencies while maintaining the desired functionality? Thank you!

You're encountering common performance and compatibility issues in Webflow interactions on Safari, especially with Lottie animations and scroll or button-based interactions. Safari tends to handle web animations and JavaScript differently than Chrome or Firefox.

1. Use Webflow’s Native Animation Features When Possible

• Lottie interactions via Webflow’s native tool tend to perform best. Double-check you are using the native Lottie Embed element rather than placing it inside an Embed code.
• Avoid external JS control of animations unless absolutely necessary—Safari is more likely to choke on script-triggered playback.

2. Optimize the Lottie File Itself

• Compress and clean the JSON Lottie file using tools like LottieFiles Optimizer.
• Limit shape layers and expressions in After Effects before export. Complex vector animations with lots of layers tend to overload Safari’s rendering engine.

3. Adjust Page Interaction Settings

• Reduce animation easing complexity or set different easing for Safari using Webflow's "Only affect…" filters + browser targeting via custom code.
• Replace high-friction interactions with simpler alternatives: for example, use fade + move instead of 3D transforms where possible.

4. Use Conditional Scripts for Safari-Specific Behavior

• You can inject Safari-specific adjustments using custom code that detects the Safari browser, then modifies interaction properties or fallback animation:

  Example:

• Use navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome") to detect Safari.

• Then adjust interaction behavior or disable complex Lottie instances selectively.

5. Avoid CSS Overflow & Scroll Problems

• Safari often mishandles overflow: hidden; on scrolling containers. Consider using Webflow's native Scroll action interactivity with minimal overflow manipulation.
• With scroll-to-anchor links, experiment with custom smooth scroll JS instead of default Webflow anchor behavior, which can be choppy on Safari with large DOM structures.

6. Test and Adjust Z-Index & Positioning

• Safari can render collapsed menus or side nav inconsistently if z-index, position: fixed, or overflow are not tightly controlled.
• Frequently test in Safari during development to identify animated elements that behave differently when layered.

Summary

To reduce interaction lag across Safari, simplify Lottie content, rely on Webflow-native animations, and apply custom browser-targeted fallbacks where needed. Safari’s animation engine has stricter performance tolerances, so minor changes can significantly improve behavior.