Streaming live at 10am (PST)

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

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

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

.gradient-text {
-webkit-box-decoration-break: clone;

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

1 Like

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

1 Like