Text disappears on mobile

Design help Layout & Design
1

The text agency disappears
This is what my designer shows:

image
image520Ă—568 82.3 KB

This is what it looks like on an actual mobile.

image
image828Ă—1792 62.8 KB

Read Only Link: https://preview.webflow.com/preview/accela?utm_medium=preview_link&utm_source=designer&utm_content=accela&preview=ed0664c4712820e20baccf18090db48a&workflow=preview

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

2

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
3

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
4

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.