Html 具有边框半径的元素在Microsoft Edge中显示转换后的工件

我有一个应用了

边界半径
的元素，在缩小以容纳其他放大的元素后，当返回到其正常宽度时，它似乎会留下某种痕迹（视觉缺陷）。这似乎只有在使用
边界半径
属性且故障级别与
边界半径
的值成比例时才会发生

基本上，容器中有两个元素，显示为flex
。悬停时第二个元素的宽度增加，因此另一个元素需要收缩以避免溢出。当我停止在第二个元素上悬停时，第一个元素返回到其正常宽度，但它在其边缘留下了一条奇怪的视觉轨迹（意料之外的双关语）

悬停前：


悬停期间：


悬停后（错误）：



#容器{
显示器：flex；
对齐项目：居中；
宽度：50%；
保证金：0自动；
}
#减少{
背景：#eee；
宽度：100%；
高度：50px；
边界半径：30px；
}
#气垫膨胀{
过渡：所有0.5s缓解；
宽度：20%；
}
#悬停展开：悬停{
宽度：50%；
}

悬停这个
有一个解决方法。可以通过将受影响的图元升级到具有的复合层，强制边缘重新绘制该图元

您只需为
#reduce
元素设置以下规则：

transform: translateZ(0);

以下是工作示例：


#容器{
显示器：flex；
对齐项目：居中；
宽度：50%；
保证金：0自动；
}
#减少{
弹性：20；
背景：#eee；
高度：50px；
边界半径：30px；
变换：translateZ（0）；
}
#气垫膨胀{
弹性：10；
过渡：flex 0.5s易用性；
}
#悬停展开：悬停{
弹性：20；
}

悬停这个
您能否尝试添加CSS前缀，看看它是否能解决问题？只要将你的CSS粘贴到那里并替换它@Azametzin我刚刚试过，它仍然不起作用。好的。好吧，解决这种奇怪的行为没有成功
Flexbox
已知在边缘/IE上有缺陷。我只是避免做一些事情，因为有些情况下没有解决方案。例如，
justify content:space-equality
在Edge中不起作用，所以为了保持兼容性，我根本不用它。祝你好运。@Deepak MSFT我不确定你是否理解这个问题。当“Hover This”元素悬停并展开时会发生这种情况，而不是当您将鼠标悬停在灰色元素上时。而且，Chrome不这么做，只有Edge。是的，我误解了。我再次检查，发现我可以用MS Edge生成此问题。我将尝试向Edge开发人员提交有关此问题的反馈。谢谢你的理解。