Streaming live at 10am (PST)

Text disappears on mobile

The text agency disappears
This is what my designer shows:

This is what it looks like on an actual mobile.

Read Only Link: Webflow - Accela

Live site: https://accela.webflow.io/

Hi @ConfusedMan34, thanks for your post! iOS does not support the background clipping to text, so the color set for the background is used in that case for webkit-text-fill-color and that is set to transparent.

I would change.the Hero Span class to have a black or other color background, that color will be used instead of the linear gradient on iOS devices:

Shared with CloudApp

Removing the background text clipping also works to resolve the issue, but that will affect all devices/browsers.

If you change the color to black in my example, the background clipping will still work on other devices/browsers that support it.

I hope this helps

1 Like

I found this weird because if you scroll down a bit to the “Case Studies” Section it displays correctly here. Any idea why it would work there but not for my h1?

Also, thank you for responding @cyberdave

Edit: I found a work-around what I did was I wrapped each word in it’s own span.

1 Like

Hi @ConfusedMan34, thanks, good to know, I will have to test around with it, that is weird I agree, good to hear you have a workaround, thanks for sharing that.