1

Part of my gradient text disappears when viewed on my iPhone. I'm having this issue where my webpage looks perfect on every browser and even the mobile view with the browser inspect tool but when I deploy it and view it on my actual phone, the text "Engineer" disappears from the page and I'm not sure how to understand this bug.

I linked 2 photos, one shows what the page looks like on my mobile device, the other shows what it should look like. How can I avoid something like this in the future and understand why it happens?

.gradient-text {
        background-image: linear-gradient(135deg, #019df7, #00c9a0);
        background-size: 100%;
        background-repeat: repeat;
        background-clip: text;
        
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -moz-text-fill-color: transparent;
    }
<h1 class="title">I'm ____,<br class="break"> a <span class="engineer gradient-text">Software Engineer</span>.</h1>

Picture of example on iPhone where the text "Engineer" is invisible

Picture of how it should look

Thank you, any support is much appreciated. This is quite an annoying bug to understand.

ash
  • 1,065
  • 1
  • 5
  • 20
Brian Schnee
  • 39
  • 9
  • I tried this, a different comment had suggested this. When I add the two "--" before webkit, the gradient text no longer works. – Brian Schnee Mar 13 '22 at 07:18

1 Answers1

0
  • try 0deg

.gradient-text {
  background-image: linear-gradient(0deg, #019df7, #00c9a0);
  
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  
  background-repeat: repeat;
  
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
<h1 class="title">I'm ____,<br class="break"> a <span class="engineer gradient-text">Software Engineer</span>.</h1>
Neptotech -vishnu
  • 1,096
  • 8
  • 23
  • When I add the two "--" before the webkit, just like youve done, the gradient no longer works even on the browser. Here is where I had gotten the code for this gradient overlay: https://fossheim.io/writing/posts/css-text-gradient/ – Brian Schnee Mar 13 '22 at 07:17
  • you can confirm this by using stack overflow's "Run code snippet" – Brian Schnee Mar 13 '22 at 07:19
  • yes,@BrianSchnee check the code now (i have changed to 0deg) – Neptotech -vishnu Mar 13 '22 at 07:22
  • I see that change and it does work for 0deg. Is it not possible with the degrees I have (135deg)? The reason being is because the gradient angle matches the design of the rest of my webpage. – Brian Schnee Mar 13 '22 at 07:35
  • @BrianSchnee try it now (i have added cross-browser compatibility to `background-size` property) – Neptotech -vishnu Mar 13 '22 at 07:44
  • This is really weird. So yes, this now works for the browser snippet. When I deploy my app with this code and open it on my iPhone, it's still invisible. It seems like an iOS problem because I just had someone check on an android device. Aside from this, thank you for the continued effort. – Brian Schnee Mar 13 '22 at 07:48