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

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>