Webflow sync, pageviews & more.
NEW

What is the workaround for VH and VW not functioning correctly in Safari 5.1 when using Webflow?

TL;DR
  • Replace vh/vw with % or px units in Webflow layouts to ensure compatibility with Safari 5.1.
  • Use custom classes, JavaScript to set dynamic heights, and embed custom CSS fallbacks via Webflow's Page Settings or Embed elements.

Safari 5.1 has limited support for modern CSS units like vh and vw, which can cause layout issues in Webflow projects. Here's how to work around those limitations.

1. Understand the Limitation

  • Safari 5.1 (released in 2011) lacks full support for vh and vw, particularly:
  • vh includes hidden browser UI elements on mobile, creating miscalculations.
  • JavaScript and older CSS fallbacks are typically needed.
  • Webflow's built-in tools rely on modern browser support, so manual fixes are required.

2. Avoid vh and vw Where Possible

  • Use percentage-based height/width (%) for sections and containers instead of viewport units.
  • Example: Use Height: 100% instead of Height: 100vh on sections inside the body tag.

3. Use Fallbacks with CSS Classes

  • In Webflow, create a custom class for elements that typically use vh or vw.
  • Apply padding or margins in % or px values instead of relying solely on viewport units.
  • Set minimum heights using pixel values if consistent layout is critical.

4. Apply Custom Code for JS-Based Fix

  • Use JavaScript in Page Settings → Before tag to dynamically set height for affected elements:
  • Example: Use document.documentElement.clientHeight or window.innerHeight to calculate height and apply with JavaScript.
  • Assign the value to an inline style or a CSS variable that overrides the default.

5. Use CSS Fallbacks (via Custom Code)

  • Set fallback styles in the Head section of Page Settings:
  • Use CSS feature queries like @supports not (height: 100vh) to assign alternate styles.
  • While Webflow doesn't support full CSS feature queries natively, you can inject them through <style> in custom code.

6. Use Webflow’s Embed Element for Targeted Fixes

  • Add a custom <style> or <script> inside an Embed element to override styles on specific elements.
  • Target Safari 5.1 using a UA sniff (not ideal, but usable for an outdated browser):
  • Use JavaScript to detect older Safari versions and add a class to the <body> tag, then target that in your CSS.

Summary

To work around vh and vw issues in Safari 5.1 in Webflow, replace viewport units with % or px, use JavaScript to dynamically set heights, and inject custom fallback styles using Webflow embeds or page settings. This ensures basic layout compatibility in older versions of Safari.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Are there alternative payment methods available in India for purchasing a new "site plan" on Webflow, considering the issues with the Reserve Bank of India regulation?
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?
How can I resolve the issue of over 20 redirects on one of my Webflow pages without affecting the rest of my site?
Why are my .ttf files not appearing when trying to upload a folder of Google's Roboto fonts to Webflow's custom fonts in site settings, even though the folder shows that it contains the files on my desktop? Any advice on what to do?
Why are only 18 out of 21 articles in my Webflow CMS collection appearing on my website? What information do you require to assist with this issue?
How can I sort a CMS collection with multi-reference fields in Webflow? The option to sort seems to be missing.
How can I make a popup appear at a specific point during scrolling on my Webflow site if the 'show/hide' option is no longer available in the interactions panel?
What is the simplest way to embed audio into a Webflow portfolio website?
Is the child perspective adjustment not available in the free version of Webflow for 3D transforms?
Can I display a real-time count of items from different databases on my Webflow homepage?
What are the required fields and completion URL in Webflow for enabling Google Analytics e-commerce sales tracking with Tag Manager?
How can I preview a Webflow site in the actual browser like Chrome instead of the designer preview?
Where can I find Javascript code to make a GIF start animating on hover in Webflow?
How can I ensure that the poster of a hidden video will still be viewable when shown in a modal in Webflow?
How can we style the dropdown field in Webflow forms?
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 close a dropdown in Webflow when clicking on a link?
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?