Microsoft Edge browser doesn't render double 'box-shadow inset' properly

Question

See the example snippet below of a text using two box-shadow: inset as underline.

It renders perfectly on Chrome, Firefox and Safari (recent versions).

But it looks like this on Edge (see the faded line leaking at the bottom of the underline):

QUESTION

Is there any way around this? Or should I just give Edge users what they deserve?

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

<h2>
  <a class="boxShadow">Hello gjq box-shadow</a>
</h2>

https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar

Answer 1

I reproduced the issue in Microsoft Edge(EdgeHTML). I think it might be due to the different performance of different browser's render engine. Besides, I found a similar issue report, you could also report this issue. The situation of another issue report is also similar.

You could try to avoid using two inset box-shadow in Microsoft Edge(EdgeHTML) and use the code below as a workaround:

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
  font-family: 'Proxima Nova';
  color: rgb(60, 128, 124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

.boxShadow {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
  padding-bottom: 1px;
}

<h2>
  <a class="boxShadow">Hello gjq box-shadow</a>
</h2>