Search code examples
cssmicrosoft-edgebox-shadow

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

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).

enter image description here

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

enter image description here

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>

enter image description here

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

Solution

  • 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>