Webflow sync, pageviews & more.
NEW

How can I improve the usability of my website in Safari on Webflow?

To improve your Webflow site's usability in Safari, follow these steps:

1. Fix Flexbox and Grid Issues

Safari may render Flexbox and Grid differently than Chrome.

  • Avoid min-height: auto on flex containers.
  • Use gap instead of margin for Grid spacing.

2. Ensure Proper Font Rendering

Safari can display web fonts differently.

  • Use system fonts when possible.
  • Adjust -webkit-font-smoothing for better clarity.

3. Optimize Sticky and Fixed Elements

Safari handles position: sticky inconsistently.

  • Ensure parent containers have overflow: visible.
  • Test fixed elements for unexpected behavior.

4. Handle SVG and Image Loading

SVGs may not scale properly in Safari.

  • Set explicit width/height properties.
  • Use PNGs/WebP for better compatibility.

5. Fix Custom Interactions and Animations

Some Webflow interactions might not work as expected.

  • Check will-change properties to avoid flickering.
  • Reduce reliance on transform: scale() for hover effects.

6. Ensure Scroll Behavior Consistency

Safari may not support scroll-behavior: smooth natively.

  • Use JavaScript fallback for smooth scrolling if necessary.

7. Test Forms and Inputs

Safari applies default styles to form elements.

  • Use -webkit-appearance: none; on custom input styles.
  • Ensure accessibility by testing elements in VoiceOver.

Final Tip

Test your Webflow site regularly in Safari, including mobile, to catch inconsistencies early.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a simple floating animation using images as floating objects in Webflow?
How can I build a series of grids in Webflow that have the same height regardless of content, when column and flex box solutions don't work?
What are the optimal settings in Webflow to enable scrolling within a div block?
How to integrate Chart.js into Webflow and display the chart on a subpage?
How can I resolve the conflict between the CNAME record for www () being used by my domain provider and the need to create a CNAME record for www in HubSpot?
How can I solve the issue of my custom fonts "jumping" back to the fallback font when launching my Webflow site in Google Chrome? I have already tried using .ttf, .eot, and .woff versions of the font, but it hasn't resolved the problem. Any suggestions?
How can I use a jQuery-based databinding utility library to bind a CMS Collection to a Webflow Select form control in Webflow?
Can Webflow be used to build a Cookie Popup that allows users to accept or decline cookies on a website?
Can the 'stock' mobile nav in Webflow be edited to fill the entire screen and ensure menu items are centered both vertically and horizontally, potentially using a flexbox? The current issue is that when the menu is open, it covers up the close button. Assistance would be greatly appreciated.
How can I add an image or multiple images field in Webflow or with 3rd party support for a marketplace platform where sellers can upload profile pictures and images of previous work?
How can I integrate ConvertKit with Webflow without using Zapier? Attempting to use the "post" method on my form and adding the URL and field names is resulting in an error page. Any suggestions?
How can I change properties of elements in Webflow that are not supported by interactions?
How can I make my Vimeo video cover the full div in Webflow?
How can I resolve the issue of being unable to test a password-protected page on my Webflow staging site? I would like the client to be able to access and test the staging site, but they are encountering the error message 'Password cannot be submitted' when trying to access the password-protected page. Can I get some guidance on this?
What are the two types of Parallax implementation on my Webflow Codes and Tutorials site?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I add user input to the end of the redirect URL in Webflow?