具有边框半径的元素在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提升为复合层，从而迫使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>