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
How to duplicate a CMS collection on the same website in Webflow?
How can I enable the auto play function in the Splide slider on my Webflow site?
Is it possible to integrate Webflow with third-party app frameworks like Ember, Angular, or Knockout for declarative binding functionality, and why might it not be working when following tutorials and including the appropriate libraries and data-binds?
Is it possible to design a form in Webflow and connect it to a client management system using the Form API provided by Webflow?
What could be causing the issue with the broken URL in Webflow that includes "www.www." and what steps can be taken to fix it?
How can you achieve a responsive background image in Webflow without sacrificing loading speed for mobile users?
How can I effectively reuse Page Triggers in Webflow without the hassle of manually adding them to each page? Is there a way to manage Page Triggers more efficiently using the Class-based feature or any other solution?
Can I use a free solution like nativefier to create a Webflow Mac app using homebrew?
Which Webflow subscription would be the most suitable for a hosting and development service that plans to have separate website plans for each customer in the workspace?
What is the difference between a container and a div block in Webflow, and why would you use a div block inside a container instead of just adjusting the container itself?
What could be causing the issue where the Webflow native background video element is not playing after publishing, despite autoplay working during preview?
How can I create tiles in Webflow with images that are larger than the parent div block, so that only a portion of the image is visible and the div wrapper cuts off the overflow?
How can I properly embed a green particle animation in my Webflow site using Codepen?
How can I display newsletter posts alongside blog post categories on the Webflow Category template page, when the categories match?
How can I create a Category Collection Page in Webflow that only displays articles related to a specific category, without affecting other category pages?
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 change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission 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?
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?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?