▼
Streaming live at 10am (PST)

Multi-line Gradient Text Safari / iOS Fix (i.e., prevent disappearing text)

Design help General
#1

Why post in Design Help: Webflow should add the correct webkit prefixed CSS attribute into their default CSS engine so this bug is fixed for all Webflow users. Likewise important because Webflow Designer Preview may give you false confidence (as does any UA/viewport-based previewing). The bug is Safari’s rendering (e.g., requires a live device).

Three weeks ago, Webflow added the CSS background-clip feature live to all users.

On Safari / iOS, multi-line gradient texts and backgrounds in parent divs do not work well with position: inline. This bug has been documented, but seemingly only in the annals of CSS Quirks Volume 54.

I’ve lost some sleep this past week in finding a fix. Nobody else should need to suffer, as this bug requires a webkit-specific-prefix that is rather rare.

The layout is simple, but Safari can’t handle this situation.

Wrapper div: background: white, position: inline
Gradient text div: gradient clip to text, position: inline

Webflow-Wrong-Gradient-Webkit-Prefix
Webflow-Wrong-Gradient-Webkit-Prefix4000×3000 505 KB

What is the fix?
On the div containing the gradient text,

<style>
.gradient-text {
-webkit-box-decoration-break: clone;
} 
</style>
1 Like
#2

It solved my problem! Thanks a lot for sharing this =D

1 Like
#3

I signed up for a forum account just to say thanks. This was driving me insane. Cheers.

1 Like
#4

THANK YOU! This helped a lot!

1 Like
#5

@magicmark, would you know if this “quirk” / “bug” could either be 1) noted in Webflow’s documentation or 2) a temporary fix added to Webflow’s default CSS engine?

I don’t know how much else would break, but I do note the workaround is prefixed.

Or does Webflow expect Safari to handle this, while Webflow users need to find this specific forum post and/or read Zell’s blog?

#6

Thanks for sharing TG2. Like others mentioned this issue was driving my crazy.

1 Like
#7

THANK YOU! I can’t tell you how long I have been trying to fix this problem. I was about to give up and remove gradient text from the site, so this made my day!!

1 Like