html - 具有边框半径的元素在 Microsoft Edge 中显示过渡后的工件

Question

我有一个应用了 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 上，我对可能导致它的原因感到困惑。这是一个已知的错误？有什么解决方法吗？

Answer 1

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

您只需为您的#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>