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
  • Check SVG code for Safari compatibility and remove unsupported scripts.
  • Ensure Webflow and Safari are updated; rebuild animations using Webflow tools, inspect for CSS/JavaScript conflicts, optimize SVG complexity, and test on multiple browsers.

When SVG images with animations and interactions don't appear on Webflow only on Safari and iOS devices, it's often due to compatibility issues specific to how Safari handles SVGs. This can be a common occurrence for many users.

​

1. Check SVG Code Compatibility

  • Open your SVG file in a text editor and check for unsupported tags or attributes in Safari.
  • Remove or modify any scripts or animations embedded directly in the SVG that may not be compatible with Safari.

​

2. Update Webflow and Browser

  • Ensure your Webflow project and the Safari browser are updated to their latest versions to rule out any resolved bugs or issues.

​

3. Use Webflow Interactions

  • Recreate animations and interactions using Webflow's native interaction tools rather than relying on embedded SVG scripts.
  • Test by removing complex animations to identify if a specific feature is causing issues.

​

4. Check for CSS and JavaScript Conflicts

  • Inspect your project for conflicting CSS or JavaScript, especially those affecting SVG display properties or animations.

​

5. Review SVG File Size and Complexity

  • Optimize SVG files to reduce size and complexity, ensuring easier rendering on Safari.
  • Consider flattening or simplifying interactive elements if possible.

​

6. Test with Alternative Browsers

  • Compare display across different browsers to confirm the issue is specific to Safari/iOS.
  • Test on both desktop and mobile Safari to see if the problem is consistent.

​

Summary

SVG images with animations and interactions may not display in Safari due to compatibility issues. Ensure SVG compatibility, update Webflow and Safari, use Webflow's tools for interactions, check for conflicts, optimize your SVGs, and test across browsers. These steps should help resolve or identify the issue.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is it possible to use Webflow to create hover effects that change elements other than the one being hovered over?
How can I fix the issue of my edited Webflow settings not reflecting on LinkedIn when sharing the link?
How can I modify the response headers in Webflow to allow CORS for images stored in AWS S3?
How can I create a go back link as a breadcrumb link in Webflow that goes back to the previous page without getting an error?
Why do design changes made on one page in Webflow's "lander" template affect other pages as well?
How can I create a Collection List in Webflow that pulls in content from different Collections? We're rebuilding our eCommerce stores and need to display products from multiple categories in one list. For example, the 'View All Products' page should show all products from all Collections, and the 'Products under £100' page should display products from multiple Collections filtered by price. Is there a way to achieve this? Here is my public share link: <LINK>
Can I change the currency from USD to GBP for my Webflow Ecommerce website to accommodate clients in the UK?
How can I add user input to the end of the redirect URL in Webflow?
Is there a more flexible and functional option for creating RTEs with various layouts for project template pages in Webflow, similar to Wordpress?
How can I stop an animation on a column in Webflow when the mouse hovers over it?
How can I add a high resolution picture on the front page of my Webflow site that resizes automatically on different devices?
Is there a way to set the modestbranding and color of a YouTube video element in Webflow, either through the UI or via custom code?
What is causing the "TypeError: Cannot convert undefined or null to object" error on multiple pages in Webflow?
Is it possible to use a backslash in a URL on Webflow? If not, should I do 301 redirects from URLs with backslashes to URLs without backslashes if the marketing agency already did redirects?
How can I import a Mapbox from Codepen into Webflow and what could be causing issues with the access token?
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?