缩放变换导致与 flex 布局的渲染间隙

Question

我正在使用 flex 布局来呈现具有 3 个大小均匀的列的容器 div。在我应用比例变换之前，它的工作原理与我预期的一样。当容器按比例缩小时，内容框之间会出现细小的间隙。该问题发生在 MacOS Chrome 和 Safari 上，但不是 Firefox。我相信我看到了一个渲染错误，但想知道是否有人可能有解决方法的想法。

这是一个非常简化的示例，用于演示 Chrome 中的问题：

body {
  background: black;
  margin: 0;
}
.scale {
  transform: scale(0.703125);
}
.container {
  display: flex;
  width: 600px;
  height: 200px;
}
.column {
  flex-grow: 1;
  background:#ff0000;
}
.column:nth-child(2) {
  background: #ff3333;
}

<div class="container scale">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Answer 1

考虑解决 CSS 框阴影问题。

这是一个使用box-shadow 属性的spread-radius 值的示例。

body {
  background: black;
  margin: 0;
}

.container {
  display: flex;
  height: 200px;
}

.column {
  flex-grow: 1;
  background: #ff0000;
}

.scale {
  transform: scale(0.703125);
  overflow: hidden;                 /* new */
}

.scale>div:nth-child(2) {
  box-shadow: 0 0 0 1000px #ff0000; /* new */
}

.column:nth-child(2) {
  background: orange;               /* easier to see */
}

<div class="container scale">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

以下是此方法工作原理的详细说明：

• On hover of child, change background color of parent container (CSS only)

Answer 2

一种解决方法是在该元素上使用与其中一种颜色匹配的背景，这样页面的背景就不会显示在元素之间。

body {
  background: black;
  margin: 0;
}
.scale {
  transform: scale(0.703125);
}
.container {
  display: flex;
  width: 600px;
  height: 200px;
}
.column {
  flex-grow: 1;
  background:#ff0000;
}
.column:nth-child(2), .scale {
  background: #ff3333;
}

<div class="container scale">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>