title: iOS Safari Adds Additional Border On Background Image
body: <blockquote>
    <h2>HTML CODE</h2>
  </blockquote>
  
  <pre><code>&lt;div class="pageHeader"&gt;
  &lt;span class="coolStyleUnderline"&gt;Change Password&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <h2>CSS CODE</h2>
  </blockquote>
  
  <pre><code>.pageHeader {
     text-align: center;
     color: #750000;
     font-family: "MedievalSharp";
     font-weight: bold;
     font-size: 60px;
  }
  .coolStyleUnderline {
     background: -webkit-linear-gradient(black, #750000);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     border-image: linear-gradient(to right, black, #750000);
     border-image: -webkit-linear-gradient(right, #750000, black);
     border-image-slice: 1;
     display: inline-block;
     line-height: .9;
     border-bottom: 6px solid #750000;
  }
  </code></pre>
  
  <blockquote>
    <h2>Things I have tried</h2>
  </blockquote>
  
  <ul>
  <li>Setting the padding to 0</li>
  <li>Setting appearance (including webkit, etc.) to "none"</li>
  <li>Setting the line-height to 1</li>
  <li>Setting the border to none BEFORE the border-bottom attribute</li>
  </ul>
  
  <blockquote>
    <h2>Devices With Issue</h2>
  </blockquote>
  
  <ul>
  <li>iPad Pro 12.9in (Safari and Chrome)</li>
  <li>iPhone X (Safari and Chrome)</li>
  <li>iPhone 6s (Safari and Chrome)</li>
  </ul>
  
  <p>I have attached two photos. The first one is what the border is supposed to look like (taken on Windows Chrome) and the second one is what I am getting on my apple devices. Any help is much appreciated. Thank you!</p>
  
  <p><a href="https://i.stack.imgur.com/V857J.png" rel="nofollow noreferrer">No Issue Photo</a></p>
  
  <p><a href="https://i.stack.imgur.com/NGLAw.jpg" rel="nofollow noreferrer">Issue Photo</a></p>