Problem with underlining text using box-shadow - html

Question

I need to underline some words in a heading. I have the following code from this excellent article: https://css-tricks.com/styling-underlines-web/
I'm using two box-shadows to create a 1px underline.
.underline {
box-shadow:
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}
<h1>I can help you <span class="underline">create positive impact.</span></h1>
It works fine. Apart from on an iPhone there is sub-pixel grey border around the edge of the white inset box shadow. As if the white box is not quite covering the black box. See screen grab:
I note that the code provided on CSS Tricks website includes
.underline {
background-size: 1px 1em;
display: inline;
}
I've also tried with this additional code, but it doesn't make any difference. (I think this code is superflous. It doesn't do anything?).
So... how do I stop this grey outline from displaying?
I've tried adding a shadow to the outside bottom edge of the box. To 'mask' the grey line, but it has not worked:
.underline {
box-shadow:
0 2px rgb(255, 255, 255),
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}

Answer 1

It's a known bug in iOS.
For workaround, you can simply put an mask as overlay:
-webkit-mask-image: -webkit-radial-gradient(white, black);
.underline {
-webkit-mask-image: -webkit-radial-gradient(white, black);
box-shadow:
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}