What workaround or code can be used to fix the bug on Safari in Webflow?
- Test your site in Safari and use Web Inspector to identify layout bugs.
- Apply Safari-only CSS fixes using media query and feature detection hacks in custom code or HTML embeds.
- For advanced cases, use JavaScript to detect Safari and apply specific class-based style overrides.
Safari can sometimes render Webflow elements incorrectly due to lack of support for certain CSS properties or inconsistent layout behaviors. Here's how you can work around or fix common bugs specific to Safari.
1. Identify the Safari-Specific Bug
- Test your site in Safari to identify which elements don't behave correctly.
- Use Safari’s Web Inspector (right-click → Inspect Element) to debug layouts and styles.
- Common issues include:
- Flexbox or Grid rendering glitches
position: stickynot working- Overflow scroll inconsistencies
vhunit bugs on mobile Safari
2. Use a Safari-Specific CSS Hack
You can target Safari using a known media query hack:
Add this custom code in Page Settings → Custom Code → Inside
<style>tags in the<head>section:```css
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) {
/_ Safari-only styles /
.your-class {
/ e.g., override a position or fix flexbox issue _/
}
}
}
```Replace
.your-classwith the specific class you're targeting.
3. Use Webflow's Custom Code Embed
- Add HTML Embed blocks where needed.
- Within the embed, wrap safari-specific styles using the same CSS hack above.
- You can also test user agent strings with JavaScript (e.g., using
navigator.userAgent) if needed.
4. Remove Problematic Styles in Safari
- If Safari breaks certain styles (e.g.,
backdrop-filter,transform: translateZ(0)), override or remove them specifically for Safari using the Safari-only media query shown above.
5. Use JavaScript Detection (if absolutely necessary)
If CSS hacks aren’t sufficient, detect Safari with JavaScript and apply class-based changes:
```javascript
if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
document.body.classList.add('safari');
}
```Then in your custom code, you can write:
```css
body.safari .your-class {
/_ Safari-specific override _/
}
```Add this script in Page Settings → Footer Code (before
</body>).
Summary
To fix Safari-specific bugs in Webflow, use CSS media query and feature detection hacks to isolate styles for Safari. For more complex issues, fall back to JavaScript-based user agent detection and apply class selectors. Always test directly in Safari to confirm fixes.