Why is it important for Webflow to add the correct webkit prefixed CSS attribute into their default CSS engine to fix this bug affecting multi-line gradient texts and backgrounds in parent divs on Safari / iOS?
TL;DR
- Safari and iOS require
-webkit-background-clip: text;and-webkit-text-fill-color: transparent;for gradient text to work, but Webflow does not include these by default. - Users must rely on manual code injection to fix broken gradient rendering, which undermines Webflow’s no-code, cross-browser design promise.
Webflow's default CSS engine currently doesn't include the necessary -webkit-background-clip: text; prefix, which causes multi-line gradient text effects to break on Safari and iOS. Fixing this is important to ensure consistent cross-browser rendering, especially on Apple devices.
1. Safari and iOS Rely on WebKit Prefixes
- Safari still requires the
-webkit-prefix for several properties, includingbackground-clip: text. - Without
-webkit-background-clip: text;and-webkit-text-fill-color: transparent;, gradient text won’t render correctly in Safari or iOS. - This leads to broken or unreadable text elements, especially in headings or sections using multi-line gradient text inside containers.
2. Webflow Strips or Ignores Vendor Prefixes in Designer
- Webflow automatically compiles styles, but doesn’t let users manually add all vendor prefixes, especially in gradient text scenarios.
- This makes it difficult for users to enforce Safari-specific fixes, even via custom code, unless they add it in Page Settings or embed code manually.
3. It Affects Visual Consistency Across Devices
- Many users design with gradient overlays or text for branding, emphasis, or artistic layout.
- If the effect breaks in Safari/iOS, it not only affects design fidelity, but also diminishes UX for a large mobile user base (iPhone/iPad).
4. Webflow's Mission Includes Cross-Browser Compatibility
- Webflow advertises pixel-perfect design without code across all devices.
- By not including critical prefixes like
-webkit-, it undermines that promise for a massive segment of users on Apple platforms.
5. Workarounds Add Friction
- Users currently rely on:
- Custom code snippets in Head/Footer.
- Manual style overrides via
Embedelements. - This breaks the no-code principle Webflow champions and is unnecessary if Webflow’s rendering engine properly includes vendor prefixes.
Summary
To ensure multi-line gradient texts render correctly on Safari and iOS, Webflow must include the -webkit-background-clip: text; and related vendor-specific rules in its CSS output. This maintains visual fidelity, cross-browser consistency, and aligns with Webflow’s promise of hassle-free, responsive design.