Clipping background image to text breaks on mobile

Design help Custom code
1

I found this code to clip a background image to some text:

.clipped {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

But when I use it on the line “This era will be won by those with the courage to shape it:” it breaks on mobile. See image:

IMG_0176.PNG
IMG_0176.PNG1125×2436 198 KB

When I view the mobile preview in Webflow, it does not show this. It’s only when I view it on my iphone does it do this. It works fine on desktop.

Any ideas on how I can fix this? Or another way to achieve this effect?

Thanks!

Here is my site Read-Only: link

2

I have since removed the code so that the live site performs as wanted. But would still love to solve the issue so that I can use that design style.

3

You ever figure this out?