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>
2 Likes
#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
#8

Could you please help me to define where that html should be posted?

#9

Ditto to @Philein’s question, does anyone know where to place the code?

#10

Which div does this code go? On the text span? or the text content? or a parent div?

And where does it get placed? In the custom attributes section?

Thanks!

#11

Hello, everyone! My apologies. Webflow Forum notifications were in spam: wonder how that happened.

This code is applied to the gradient text div, so whichever div is the gradient text.

Where to put the code: three spots.

  1. Per page: this can go into the “before the </body> tag” in Page Settings
  2. Per page: this can also go into a custom embed block (make sure you keep the tags)
  3. Per-site: Head to your site settings, Custom Code, and drop it into Footer Code

It is not critical (e.g,. just CSS) so the <head> box isn’t appropriate. Unfortunately, we are no longer actively maintaining our Webflow site, so I haven’t had much chance to see if this has been fixed or not, or if there’s a better way, but it is still functioning on the client’s old Webflow site.