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!

TL;DR
  • Optimize Lottie animations by reducing file size and using SVG rendering over Canvas for better Safari performance.
  • Ensure CSS compatibility with vendor prefixes and replace unsupported CSS properties.
  • Implement JavaScript optimization techniques like throttling, debouncing, and replacing jQuery with native JavaScript.
  • Adjust Webflow settings by disabling smooth scrolling and reducing simultaneous animations.
  • Use Safari's Developer Tools for testing and debugging, and consider polyfills and conditional loading for Safari-specific issues.

Performance issues in Safari with Webflow interactions such as Lottie animations and collapsible elements are not uncommon. Here are steps to optimize and address these concerns.

​

1. Optimize Lottie Animations

  • Reduce File Size: Ensure your Lottie files are optimized by reducing complexity and trimming unnecessary data.
  • SVG Rendering: Use SVG over Canvas when possible, as Safari typically handles SVG rendering better.

​

2. Check for Browser-Specific CSS

  • Vendor Prefixes: Make sure CSS properties have the necessary vendor prefixes for Safari compatibility.
  • Unsupported Properties: Identify and replace any CSS properties not fully supported by Safari.

​

3. JavaScript Optimization

  • Throttling and Debouncing: Implement throttling or debouncing techniques for animations and interaction handlers to reduce load.
  • Replace jQuery: If using jQuery, consider native JavaScript for performance boosts.

​

4. Webflow Settings

  • Disable Smooth Scrolling: In Webflow settings, disable smooth scrolling as it can conflict with Safari’s native scrolling behavior.
  • Reduce Animations: Simplify the number of simultaneous animations and make interaction effects more subtle.

​

5. Test and Debug

  • Console Errors: Use Safari's Developer Tools to check for console errors and performance warnings.
  • Responsive Design Mode: Utilize Safari's Responsive Design Mode to simulate traits across different devices.

​

6. Alternate Solutions

  • Polyfills: Consider using polyfills for functionality not natively supported by Safari.
  • Conditional Loading: Load specific scripts or styles conditionally for Safari to mitigate known issues.

​

Summary

Safari may require additional optimization for Webflow interactions to perform smoothly. Optimize Lottie files, check CSS compatibility, and streamline JavaScript usage. Regularly test in Safari and adjust settings within Webflow for better consistency. Make sure your design is responsive and consider alternative tools where necessary.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make the block in Webflow containing hidden text grow to the same height as the text itself when the button is clicked, without pushing other elements?
Is it possible to create a hidden honeypot field in a Webflow form that doesn't display in the email submission? I want to automatically filter out spam emails using an email software provider without removing the honeypot field name.
Is there a way in Webflow to override the CMS content in a symbol, so that the same symbol can display different content?
Can I use Stripe Checkout in Webflow without needing Foxy or similar tools? I see mentions of an integration but lack clear documentation and notice community frustrations.
Can a third party payment gateway, such as "Tap Pay," be integrated into Webflow for an ecommerce site that does not support any of the available payment methods provided by Webflow? If so, how can this integration be achieved?
How can I implement fullpage.js code on my website using Webflow?
Hi Webflow Community, has anyone successfully used a custom code workaround to make a CMS field automatically populate a paragraph or text form field? I recall a tip from 2016 advising to add a "hand-coded" form in the dynamic embed code and populate the input tags with dynamic data. If anyone has experience with this or could provide a custom code snippet, I would greatly appreciate it. Thank you!
Can Webflow automatically log out users after a period of inactivity without using Memberstack?
How can I fix the issue where my "scroll into view" animation doesn't run immediately if the content is already in the viewport when the page loads in Webflow? Should I use a different type of interaction with IX2, or is there another solution?
How can I incorporate live shipping rates from UPS, FedEx, USPS, and LTL shipping into a client's website using Webflow?
Can the "Unsubscribe from notifications for this site." link be removed from the emails in Webflow to prevent third-party unsubscribes without warning?
How can I display newsletter posts alongside blog post categories on the Webflow Category template page, when the categories match?
Can I integrate a different checkout payment service with Webflow Ecommerce using an API or custom code?
Why is the text not wrapping within the div in Webflow, causing it to expand vertically in mobile view?
How can I capture user information such as name, email, and phone number on my Webflow site, and where can I retrieve the submitted information?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?