What is the workaround for VH and VW not functioning correctly in Safari 5.1 when using Webflow?
TL;DR
- Use 100% height instead of 100VH, ensuring parent elements have defined heights.
- Apply min-height in PX or EM if percentage height doesn't work.
- Use CSS variables with JavaScript to adjust viewport height dynamically.
- Avoid VW units for font sizing, use REM or EM instead.
- Test on BrowserStack or an older Safari version to confirm fixes.
Safari 5.1 has known issues with VH (Viewport Height) and VW (Viewport Width) units, particularly with incorrect calculations or lack of support. Here’s how to work around this issue in Webflow:
1. Use Percentage-Based Height Instead
- Instead of using 100VH, try setting elements to height: 100% if they are inside a parent container with a defined height.
- Ensure all parent elements up to the
<body>tag have a specified height to make 100% height inheritance possible.
2. Apply a Minimum Height with PX or EM
- If percentage-based height doesn’t work, use min-height in pixels (px) or EM units to approximate the VH-based height.
- Example: Set min-height: 700px instead of 100vh to maintain at least a workable viewport height.
3. Add Custom CSS with JS Fallback
- Webflow allows custom CSS in the Embed Code widget. Use JavaScript to correct viewport-based styles in older Safari versions:
- Webflow Embed Code Widget → Add this inside the
<head>section:
```html ``` - Then, in Webflow’s style settings, use *_height: calc(var(--vh) _ 100)** instead of **100vh**.
4. Avoid VW for Font Sizing in Legacy Safari
- Some Safari versions miscalculate VW-based font sizes, causing tiny or oversized text.
- Use REM or EM units instead of VW when defining responsive text sizes.
5. Test in BrowserStack or Old Safari Versions
- If you don’t have access to an older Safari version, use BrowserStack to confirm the issue and validate your workaround.
Summary
Since Safari 5.1 struggles with VH/VW calculations, try using percentage-based height, min-height in pixels, or CSS variables with JavaScript to fix viewport rendering. Always test workarounds on multiple devices to ensure compatibility.