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

TL;DR
  • Check browser compatibility and test on the latest Safari version.
  • Examine Webflow layout settings for responsive design implementation.
  • Clear Safari browser cache to remove old cached stylesheets.
  • Inspect any custom code for Safari compatibility issues.
  • Use a browser testing tool for cross-browser examination.
  • Simplify and rebuild problematic sections if necessary.

If you're experiencing layout issues with your Webflow website on Safari browsers on iPad and MacBook Air devices, follow these steps to diagnose and potentially resolve the problem.

​

1. Check Browser Compatibility

  • Ensure your site is tested on the latest version of Safari since older versions may not fully support Webflow features.
  • Verify if the issue occurs only on specific Safari versions or device models to narrow down the problem.

​

2. Examine Layout Settings

  • Check your layout settings in Webflow to ensure responsive design features are properly implemented.
  • Examine CSS grid, flexbox, and margin/padding settings that might cause discrepancies in layouts across different screen sizes.
  • Test with different screen widths using Webflow's built-in responsive design preview.

​

3. Clear Browser Cache

  • Clear the cache in Safari by going to Settings > Safari > Clear History and Website Data on iPad or Safari > Clear History and Website Data on the MacBook Air.
  • This can resolve issues where old cached stylesheets cause layout errors.

​

4. Inspect Custom Code

  • Review any custom CSS, JavaScript or third-party integrations you've added to your Webflow project.
  • Ensure that any additional code doesn't contain elements that are not compatible with Safari.

​

5. Cross-Browser Testing

  • Use a browser testing tool like BrowserStack or CrossBrowserTesting to see how your site looks on different devices and Safari versions.
  • These services let you identify issues that are specific to particular browser environments.

​

6. Simplify and Rebuild

  • If the issue persists, consider simplifying the problematic section and gradually rebuilding it to identify the element causing the problem.

​

Summary

To resolve layout issues on Safari for iPad and MacBook Air, check browser compatibility, examine layout settings, clear the browser cache, inspect custom code, and perform cross-browser testing. Simplifying the section and rebuilding it gradually can also help pinpoint specific issues.

​

If issues remain unresolved or require specific attention, consider reaching out to Webflow Support for personalized assistance.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the best approach for copying sections with nested content across multiple pages in Webflow?
How can I resolve the issue of not being able to sort items on a CMS page in Webflow when using button sorting instead of a dropdown select, especially when navigating to different pages?
How do I upload an XML sitemap to Google Search Console for a site published with Webflow on a custom domain?
How can Webflow use AI technology to positively impact design and development?
Can a third party payment gateway, such as "Tap Pay," be integrated into Webflow for an ecommerce site that does not support any of the available payment methods provided by Webflow? If so, how can this integration be achieved?
Is it possible to enable auto play for a YouTube video in the new Webflow lightbox, even if passing on YouTube parameters through the URL doesn't work?
How can I blur only the background image of a div block in Webflow without blurring the content inside it?
What is the cause of the "429 Too Many Requests" error in Webflow that is disrupting client work and how can it be resolved?
How can I make the bottom wrapper show on tablets and mobile devices in Webflow? I have applied SVH to the hero section, but it is still being clipped on an iPad (10") and is completely invisible on an iPhone (8). Any suggestions?
Is it possible to apply the backdrop filter property to both a parent element and its child elements in Webflow?
Why do all my Webflow site pages have a horizontal overlay, even after trying to hide overflowing content and using elements with 100vh?
Can scrolling be prevented when the off-canvas menu is open in Webflow?
How can I remove unpublished changes in the Webflow editor that a client no longer wishes to publish?
How can I add custom CSS media queries to the Header in the custom code section in Webflow?
How can I make a video appear after a certain scroll distance in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?