Clip background to text not showing on mobile

Design help Layout & Design
1

Hello,

I have used the “clip background to text” on step sequence numbers of my website. Everything looks good in webflow at all breakpoints but when I actually view on an iphone the numbes just don’t show up.

I have tried a few things based on other forum discussions:

  1. Restart iPhone
  2. Try Chrome and Safari browsers (same problem on both)
  3. Change Position and Display Properties
  4. Change Font

Still not showing despite those troubleshooting steps. Do mobile browsers not support this feature perhaps?

Thank you!

Here is my site Read-Only: https://preview.webflow.com/preview/slope-example?utm_medium=preview_link&utm_source=designer&utm_content=slope-example&preview=bcd855322dd33a39821b0a95399fcd02&workflow=preview

2

Webkit does support background-clip. Have you tried setting the gradient on the text-block element itself with the clipping option, rather than setting it on the parent?

image

3

Hi @learyjk, using background clipping on iOS has had some troubles sometimes and there have been other cases like this reported in stackoverflow, here is an article that may help to use some custom css:

I hope this helps, I am going to help check further with this behavior with the team to see if there is something that can be done to prevent this strange behavior from the designer.

1 Like
4

Thanks @RDaneelOliwav for your reply - I tried moving the clip to the child text element but no luck.

5

Thanks @cyberdave - I’ll look into the link you sent.

6

Try putting the numbers into a span, it’s suggested on the stackoverflow topic

1 Like
7

@RDaneelOliwav @cyberdave just wrapped it in a span and it worked! Thanks so much for the help.

2 Likes
8

Awesome! Glad it worked!

1 Like
9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.