带有border-radius的元素在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

有一个解决方法。您可以强制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>