缩放变换导致与 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

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

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>

Answer 2

考虑解决 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>

这里详细解释了此方法的工作原理：

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

Scale transform causes rendering gap with flex layout

css

google-chrome

flexbox

css-transforms