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 doesn't Webflow support webP images despite widespread browser and operating system compatibility?
How can I change the map location or coordinates in the code using Webflow map clone?
Does Webflow have a built-in photo gallery tool, or is there an alternative service available to create photo galleries without additional expenses for hosting or integration with Adobe Lightroom?
How can I integrate a HubSpot CTA (call to action) embed code in Webflow?
How does Webflow address high CO2 emissions and strive for green hosting for websites hosted on their platform?
How can I fix the hover animation issue with the 'onze disciplines' content block in Webflow?
How can I create a fixed menu on Webflow's mobile version without causing page scroll behind the menu? Disabling the scroll offset option doesn't seem to work. Placing the navbar at the top also doesn't resolve the issue. What could be the problem with this option?
How can I reduce the text size of a heading on scroll in interaction, similar to what Webflow does on its website?
How can I hide the TypeForm link inside a link block in Webflow to implement a full-screen popup on a button press?
How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?
What should I do about the "Manifest Issue" error I got when running a Lighthouse scan on my Webflow website?
How can I fix the issue with Google Console flagging alerts for videos on a Webflow page that do not have a thumbnail URL provided?
What should I do if I use the map component in Webflow and want maps to continue loading properly after July 1st?
How can I find specific sizes in the Webflow University to advise the dev?
How can I fix the issue with my pop-up modal on Webflow's pricing page (specifically on mobile) where the modal takes up the entire screen and the user can't scroll down to press the "Sign-Up" button?
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 dynamically redirect to a CMS created after form submission in Webflow?
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 I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?