带有边框半径的元素在 Microsoft Edge 中显示过渡后的伪影答案

【问题标题】：Element with border-radius shows artifacts after transition in Microsoft Edge带有边框半径的元素在 Microsoft Edge 中显示过渡后的伪影
【发布时间】：2019-03-20 21:51:56
【问题描述】：

我有一个应用了border-radius 的元素，在缩小以容纳其他放大的元素后返回到其正常宽度时，它似乎会留下一种痕迹（视觉错误）。这似乎只在使用border-radius 属性并且故障级别与border-radius 的值成正比时才会发生。

基本上，display: flex 的容器中有两个元素。第二个元素在悬停时宽度增加，因此另一个元素需要缩小以免溢出。当我停止在第二个元素上悬停时，第一个元素恢复到正常宽度，但它的边缘留下了奇怪的视觉痕迹（双关语无意）。

悬停前：

悬停期间：

悬停后（错误）：

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

同样，这只发生在 Microsoft Edge 上，我对可能导致它的原因感到困惑。这是一个已知的错误？有什么解决办法吗？

【问题讨论】：

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

标签： html css microsoft-edge

【解决方案1】：

有一个解决方法。您可以强制 Edge 重新绘制受影响的元素，方法是使用 translateZ 将其提升为复合层。

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

transform: translateZ(0);

以下是工作示例：

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

【讨论】：