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

Question

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

考虑使用CSS框阴影解决问题。

以下是使用spread-radius属性的box-shadow值的示例。

＆＃13;

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 2

围绕它的一种方法可能是在该元素上使用与其中一种颜色匹配的背景，因此页面的背景不会在元素之间显示。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;