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
@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?
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!!
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.
Per page: this can go into the “before the </body> tag” in Page Settings
Per page: this can also go into a custom embed block (make sure you keep the tags)
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.