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?

Webflow should include the correct -webkit-background-clip: text CSS prefix to ensure multi-line gradient text and background effects render properly in Safari and iOS browsers. Without this, these styles may not display as intended, causing inconsistencies across devices.

1. Understanding the Issue

• Safari and iOS require -webkit-background-clip: text for background-clip styling to work on text elements.
• Webflow’s default CSS engine currently may not include this, leading to missing or broken gradient effects.
• This issue primarily affects multi-line text elements inside a div with a background gradient.

2. Why Webflow Needs to Address This

• Cross-Browser Compatibility: Many designers rely on Webflow for no-code development, expecting consistent rendering across all browsers.
• Improved User Experience: Users visiting a site on Safari may see plain text instead of the intended gradient effect, harming aesthetic design and branding.
• No Manual Overrides Needed: If Webflow adds the correct -webkit- prefix, designers won’t have to insert custom code manually.

3. Proper Webkit Prefix Usage

• The correct syntax ensures the gradient is applied as expected:
• CSS Required for Safari:
  • background: linear-gradient(to right, red, blue);
  • -webkit-background-clip: text;
  • -webkit-text-fill-color: transparent;

Summary

Webflow should integrate -webkit-background-clip: text into its default CSS to maintain styling consistency in Safari and iOS. This improves compatibility, prevents manual fixes, and ensures Webflow-generated websites display correctly across all devices.