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
  • Check for Safari-specific CSS issues like flexbox, grid, vh/vw units, or missing -webkit- prefixes.
  • Use Safari’s developer tools and real devices to inspect layout problems and verify rendering accuracy.

If your Webflow site displays layout issues in Safari on iPad or MacBook Air, it could be due to browser-specific rendering quirks or unsupported CSS features.

1. Check for Safari-Specific CSS Incompatibilities

  • Safari on iOS and macOS may not fully support the latest CSS features used in Webflow.
  • Look out for issues with flexbox, grid, vh/vw units, or backdrop-filter, which sometimes behave differently in Safari.
  • Use Can I Use (caniuse.com) to verify compatibility of any advanced CSS you’re relying on.

2. Inspect the Site Using Safari Developer Tools

  • On a MacBook Air, open Safari and go to Develop > Show Web Inspector.
  • Enable device simulation for iPad to spot layout issues.
  • Look for any differences in computed styles, box dimensions, or JavaScript errors.

3. Test Layout Inside Webflow Designer

  • In Webflow, use the tablet and mobile preview modes, especially the iPad landscape setting.
  • However, keep in mind: Webflow Designer previews do not exactly replicate how Safari renders things on physical Apple devices.

4. Use Overflow or Fixed Position Responsibly

  • Safari can have problems rendering elements with overflow:hidden, position:fixed, or 100vh units, especially within nested containers or modals.
  • Consider using min-height: 100vh or custom JS to calculate height on load if needed.

5. Try Adding -webkit- CSS Prefixes (Via Custom Code)

  • For some effects (e.g., custom scroll, filters), Safari may still require -webkit- prefixes.
  • These can be added under Project Settings > Custom Code or Page Settings > Custom Code.

6. Verify Font Rendering and Line Height

  • Safari may render fonts with slightly different line-height or letter-spacing.
  • Avoid relying on exact pixel alignment between elements if you’re using custom fonts.

7. Clear Cache and Test on Actual Devices

  • Confirm layout issues on real iPads or MacBooks, not just simulators.
  • Clear Safari cache to ensure you’re not viewing an outdated version of your CSS or Webflow export.

Summary

Safari layout issues on iPad or MacBook Air usually stem from CSS compatibility differences, vh/vw sizing, or unsupported properties without -webkit- prefixes. Use Safari’s Web Inspector to pinpoint problems, and test on real devices to ensure consistent rendering.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why am I getting "Image elements do not have explicit 'width' and 'height'" errors in Webflow even though I have specified the attributes?
How can I add new blog attributes to the Blog CMS Collection Settings in Webflow if the option is locked/grayed out?
How can I track events in my Google Analytics account using Webflow?
Is there a way to make images ignore column padding in Webflow without setting their width manually or using separate divs? Providing the images with 72px padding left and right inside a rich text block is also not preferred due to limitations in reordering and organizing. Is there a solution for this? Thank you!
How to create a cool effect using Webflow animations?
How can I resolve the redirect error in Webflow so that my site can be properly indexed?
Is there a way to upload a TXT file to the root domain of a site using Webflow?
What are some third party tools or integrations that can be used with Webflow?
How can I start a Webflow interaction using custom JS code with only the data-w-id?
How can I overlay text on an image within a section in Webflow?
How can I address JavaScript-related issues with my Webflow site to improve its speed, particularly in regards to unused JavaScript, execution time, and minimizing main-thread work, considering that I have no experience with JS or custom code? I have already tried minifying HTML, CSS, and JS, as well as cleaning up unused classes, but these tweaks resulted in a slightly worse performance score.
Is there a code to restrict the zoom out level on Google Maps when using Snazzymaps in Webflow?
How do I create a fixed div that stops scrolling in Webflow like the effect on my old site?
How can I hide or show a section/container with a button click in Webflow?
Can you use Webflow's native icons like Close (X), Arrows (< >), and Hamburger/Menu icons instead of third-party tools like Font Awesome?
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?
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?