Element with border-radius shows artifacts after transition in Microsoft Edge - html

Question

I have an element with border-radius applied that appears to leave a sort of trail (visual bug) behind when returning to its normal width after being shrunk to accommodate other enlarged elements. This seems to only happen when the border-radius property is used and the glitch level is proportional to the value of border-radius.
Basically, there are two elements inside a container with display: flex. The second element increases in width on hover and so the other element needs to shrink in order to not overflow. When I stop hovering, on the second element, the first one returns to its normal width, but it leaves a strange visual trail of its edge (pun unintended).
Before hover:
During hover:
After hover (the bug):
#container {
display: flex;
align-items: center;
width: 50%;
margin: 0 auto;
}
#reduce {
background: #eee;
width: 100%;
height: 50px;
border-radius: 30px;
}
#hoverexpand {
transition: all 0.5s ease;
width: 20%;
}
#hoverexpand:hover {
width: 50%;
}
<div id="container">
<div id="reduce">
</div>
<div id="hoverexpand">
<span>Hover this</span>
</div>
</div>
Again, this only happens on Microsoft Edge and I'm baffled as to what might be causing it. Is this a known bug? Is there any workaround?

Answer 1

There is a workaround. You can force Edge to repaint the affected element by promoting it to a composite layer with translateZ.
You only have to set the following rule to your #reduce element:
transform: translateZ(0);
Here is the working example:
#container {
display: flex;
align-items: center;
width: 50%;
margin: 0 auto;
}
#reduce {
flex: 2 0;
background: #eee;
height: 50px;
border-radius: 30px;
transform: translateZ(0);
}
#hoverexpand {
flex: 1 0;
transition: flex 0.5s ease;
}
#hoverexpand:hover {
flex: 2 0;
}
<div id="container">
<div id="reduce">
</div>
<div id="hoverexpand">
<span>Hover this</span>
</div>
</div>