border-bottom bug in Microsoft Edge

Question

In Microsoft Edge browser after hovering an element border-bottom set the color of the bottom element. Bug? Look at jsfiddle: https://jsfiddle.net/Experimenter/65eLh89r/

a{
    display: block;
    background: blue;
    padding: 10px 30px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid gray;
}
a:hover{
    color: white;
}

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">0</a></li>
</ul>

Answer 1

Had the same issue and created kind of a hack or workaround this bug. What worked for me was to use margin-bottom: -1px; and border-bottom: 2px solid gray;

so mentioned example would look like:

a{
    display: block;
    background: blue;
    padding: 10px 30px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid gray;
    margin-bottom: -1px;
}
a:hover{
    color: white;
}

Answer 2

Had the same problem. It appears if the height or width is dynamic and has not a rounded pixel size. As solution example: Change the height to 40px (or what else) and the hover effect works.

But Microsoft should really fix this "designbug" asap... May Edge is fast, but the rendering is not perfect!