Why do some of my SVG images with animation and mouse interaction not appear on my Webflow site when viewed on Safari and iOS devices, even though they display fine when directly opened in a browser? Have others experienced this issue? Thank you for your help!

TL;DR
  • Optimize SVGs for Safari, use Webflow's built-in animations, and simplify SVG code. 
  • Update Safari and iOS, test on various devices, and seek help from Webflow community and support if needed.

SVG images with animations and mouse interactions not appearing on Webflow sites in Safari and iOS devices is a common issue experienced by many users.

​

1. Check SVG Export Settings

  • Ensure SVGs are optimized for web use, specifically considering Safari's rendering quirks.
  • Avoid complex animations that might not be supported on all browsers, especially in SVGs directly.

​

2. Use Webflow’s Built-in Features

  • Utilize Webflow animations instead of SVG animations whenever possible, as these are more reliably cross-browser compatible.
  • Test interactive elements using Webflow's interactions and triggers for better support across different devices.

​

3. Review Code Within SVG

  • Remove unnecessary scripts or CSS within the SVG code that might conflict with Safari's rendering.
  • Simplify SVG paths and ensure they're compatible by using common editors, such as Adobe Illustrator, optimized for web export.

​

4. Update Browser and Device

  • Make sure your Safari browser and iOS devices are updated to the latest versions which might fix compatibility issues.
  • Test SVGs on different devices and browsers to confirm if the issue is widespread or device-specific.

​

5. Check Webflow Forums and Support

  • Visit Webflow community forums for discussions on similar issues and any offered solutions.
  • Reach out to Webflow support, if necessary, with detailed examples of the problem and steps taken.

​

Summary

SVGs with animations might have rendering issues in Safari due to compatibility. Optimize SVG export settings, use Webflow's built-in features where possible, and ensure both browser and OS are updated. Utilize community resources for additional support.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I view more than the last 30 days of traffic data in Webflow to see the website's overall performance?
Can I create a square div within a parent div in Webflow, where the square's width is 100% of the parent div and the height matches the width?
Can I use a custom link for form submissions in Webflow? I want to maintain consistency and use our own custom button instead of the default submit button.
Does Webflow have mobile functionality for adding to your CMS streams via mobile, or is there a feature in the works? If not, are there any other solutions or experiences with making Webflow CMS edits from mobile?
Can Webflow automatically map the "Providers" to the referenced collection when importing new "Articles" via CSV?
How can I insert a radio button into the text label in Webflow? I can't get it to look like the picture. Here is my site Read-Only: [LINK](LINK)
How can I mask images in Webflow using unique shapes?
Why am I experiencing issues sending a form with file uploads, custom code for date pickers, and countries on Webflow? I was able to send it once but now I'm getting an error message stating "Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
How can font color be changed based on background color zones in Webflow? What script can easily achieve this, such as black font for the upper left zone, white font for the lower zone, and white font for the upper right zone?
Is it safe to store sensitive data on Webflow's CMS?
How can I integrate a dynamic payment button to Shopify Checkout on my Webflow site?
How do I remove the white space at the bottom of a site in Webflow on the Gallio theme?
How can I add anchor links to different subtopics of a CMS page in Webflow?
Who can I contact for customer support after purchasing a Webflow template and encountering difficulties with customizing the intro page designed by a third party?
Is it possible to host an image source list elsewhere and iterate through it from Webflow to avoid overwhelming Webflow with too much code?
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?