CODEWITHSUNDEEP
htmlioscssgoogle-chromesafari
Ellington Crevier
Ellington Crevier

Reputation: 64

iOS Safari Adds Additional Border On Background Image

HTML CODE

<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>

CSS 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;
}

Things I have tried

Devices With Issue

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!

No Issue Photo

Issue Photo

Upvotes: 1

Views: 1564

Answers (1)

Ellington Crevier
Ellington Crevier

Reputation: 64

I figured it out boys. All I had to do was specify the border image width. This was done by adding the following to .coolStyleUnderline :

border-image-width: 0px 0px 6px 0px;

Thank you to everyone that tried! Have a great day!

Upvotes: 4

Related Questions