How can I fix the misalignment issue on my Webflow homepage in Safari browser for laptop/desktop view? I have already tried realigning textboxes, setting position to relative for all elements in the hero section, and playing with zooming, but none of them have worked. Any advice is much appreciated!
TL;DR
- Inspect and adjust flex/grid layouts to avoid combining auto margins with width: 100%.
- Replace height: 100vh with min-height: 100vh to prevent Safari miscalculations.
- Remove unnecessary overflow: hidden, especially in critical sections like the hero.
- Ensure absolute/fixed elements are properly positioned within relative parents.
- Use Safari-specific CSS via feature-detecting media queries if the issue persists.
- Debug with Safari’s Web Inspector to identify layout discrepancies.
If your Webflow homepage is misaligned only in Safari on desktop/laptop, the issue is likely due to inconsistent rendering of flexbox, grid, or overflow behaviors in Safari. Here’s how you can troubleshoot and fix it:
1. Check for Auto Margins and Widths in Flex/Grid
- Safari is sensitive to how auto margins and
width: 100%behave in flex or grid layouts. - Inspect elements in Webflow Designer and make sure no child element in a flex container has auto margin + width: 100% simultaneously.
- Remove or adjust conflicting width/margin settings and retest in Safari.
2. Avoid Using Height: 100vh On Sections With Overflowing Content
- Safari can miscalculate 100vh when combined with fixed headers, sticky nav, or overflowing children.
- Instead of
height: 100vh, trymin-height: 100vhand ensure children inside the section do not overflow.
3. Check for Overflow Hidden Conflicts
- Apply
overflow: hiddenonly when necessary—it can cause misalignment or clipping in Safari. - Temporarily disable any
overflow: hiddensettings on parents, especially in the hero section, and test in Safari.
4. Review Absolute/Fixed Positioning
- Safari has quirks handling absolutely or fixed-positioned elements inside flex containers.
- Ensure no absolutely-positioned elements are unintentionally overlapping or pushing siblings due to inherited styles.
- Use relative parents for absolutely positioned children, and double-check their top/left/right/bottom values.
5. Enable Safari-Specific Styling via Custom Code (if necessary)
If the problem persists and you’ve isolated it to Safari, use Webflow’s custom code area (Project Settings > Custom Code) to apply Safari-specific tweaks:
Example inline CSS (in
<head>section):
``````
6. Use Safari's Web Inspector to Pinpoint the Issue
- Open Safari, right-click the misaligned element, and choose Inspect Element.
- Check for:
- Unexpected applied styles
- Layout shifts
- Elements overflowing
- Use the "Computed" tab to compare styles with other browsers.
Summary
To fix Webflow misalignment in Safari desktop, avoid relying on height: 100vh, remove overflow: hidden where unnecessary, check your flex/grid usage, and be cautious with absolute positioning. If needed, apply Safari-specific CSS as a last resort using media queries and feature detection.