Gradient overlay on text disappearing on mobile device-CodePudding

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 >I'm ____,<br > a <span >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.

CodePudding user response：

this solution works: https://stackoverflow.com/a/65330979/18450672

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

by applying that to the css rule for the gradient overlay, it somehow works.

CodePudding user response：

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 >I'm ____,<br > a <span >Software Engineer</span>.</h1>

CodePudding user response：

   .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;

      box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1 ><br > a <span >Software Engineer</span>.</h1>
</body>
</html>