Solution for CSS Border iOS appearance issue?

Question

I recently added the following code to one of my text elements to add a cool underline to it:

border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;

It looks like this on chrome and Android: live picture here

However, on iOS devices the border completely surrounds the whole text and looks like this: iOS live picture here

I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.

I hope someone can help with this problem and I appreciate your solutions!

Best regards!

Answer 1

In your border-image-slice, give it precision and it will be ok :) I've tested it and it works on Safari v 13.1.2

Aurélie

p {
  border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}

<p>Biscuit cake sweet roll. Carrot cake caramels</p>