Webflow sync, pageviews & more.
NEW

Is there an issue with the layout of my website in Safari browsers on iPad and MacBook Air devices?

TL;DR
  • Use Webflow preview mode to check layout issues across breakpoints.
  • Inspect the site with Safari Developer Tools for CSS differences.
  • Verify flexbox and grid compatibility, ensuring properties are correctly applied.
  • Adjust fixed widths/heights to use flexible units (%, vh, vw).
  • Disable custom CSS or JavaScript to check for conflicts.
  • Test in different Safari versions to account for browser-specific behavior.

If your Webflow website is displaying incorrectly on Safari on iPad or MacBook Air, the issue could be related to flexbox, grid, or custom CSS that behaves differently in Safari. Follow these steps to troubleshoot and fix the issue.

1. Check Webflow Designer Preview

  • Use Webflow's preview mode to compare how your site looks on different breakpoints.
  • Switch to tablet and laptop-sized views to see if any unexpected layout shifts occur.

2. Inspect with Safari Developer Tools

  • Open your site in Safari on your MacBook Air.
  • Right-click an element and choose Inspect Element to open Developer Tools.
  • Look for CSS properties prefixed with -webkit-, which can behave differently.

3. Check Flexbox and Grid Compatibility

  • Safari may interpret flexbox and grid differently than Chrome.
  • If using display: flex, ensure flex-basis, justify-content, and align-items are not causing unexpected behavior.
  • If using CSS grid, check if grid-template-columns or grid-template-rows are correctly defined.

4. Adjust Fixed Width and Heights

  • If elements are cut off or misaligned, check if widths or heights are set using fixed values (px) instead of relative units (%, vh, vw).
  • Test with min-width, max-width, or auto to make elements more flexible.

5. Disable Custom CSS or JavaScript

  • If you have added custom code, disable it temporarily in Webflow's Project Settings > Custom Code.
  • Safari may not support certain JavaScript methods, like window.innerHeight for full-height elements.

6. Test in Different Safari Versions

  • Run your site in Safari's latest version and an older version (if possible).
  • Safari updates can change default behaviors for CSS properties.

Summary

If your Webflow site is not displaying correctly in Safari on iPad or MacBook Air, check for flexbox or grid inconsistencies, fixed-width layouts, and custom CSS issues. Use Safari Developer Tools to diagnose styling conflicts and adjust breakpoints for better responsiveness.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why is my form in Webflow not submitting on my live environment but is submitting on my staging environment? I am receiving an internal server error (http code 500) and a CORS policy error message. How can I resolve this issue?
Is there a way to postpone the signup process in the Webflow ecommerce checkout, so that users can purchase a product/access first and then receive an email invitation to create their account? If not, can this be achieved by using a manually added Stripe checkout integrated with Zapier and the Webflow API?
What is the Webflow hosting CSS file and why is it large and causing a slow loading time?
Can I use Webflow with a CMS and a limited builder on my site? Is there a way to embed a Webflow page using an iframe generator?
How can I add custom CSS media queries to the Header in the custom code section in Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
Is there a way to update Webflow CMS content items when a record in Airtable changes?
How can I add the new multi-image field to a template page in Webflow's Collection (Profiles)? I cannot find the field option to link in the grid settings.
How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?
How can you automate SEO and Open Graph settings for Collections in Webflow CMS to save time managing them for every page of your content-heavy website or blog?
Where can I find a country list option to add to my Contact Form in Webflow? How do I install it?
Why can't I choose the basic site plan for my domain in Webflow?
How do I make the buttons in the Webflow side menu extend all the way while maintaining the blue line on the far right border when hovered and selected?
How can I make two separate animations for a text block and button on my home page in Webflow activate simultaneously?
Which shopping cart integrates well with Webflow for a custom lighting company that wants to allow visitors to purchase lighting fixtures "as shown" on the website? Thank you!
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
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 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 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 disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?