比例转换导致弹性布局渲染间隙 [英] Scale transform causes rendering gap with flex layout

问题描述

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

I'm using flex layout in order to render a container div with 3 evenly sized columns. It works just as I'd expect, until I apply a scale transform. When the container is scaled down, thin gaps appear between the content boxes. The issue happens on MacOS Chrome and Safari, but not Firefox. I believe I'm seeing a rendering bug, but wondering if anyone might have ideas for a workaround.

下面是一个大大简化的示例，它演示了Chrome中的问题：

Here's a greatly simplified example which demonstrates the problem in 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>

推荐答案

考虑解决CSS框阴影的问题。

Consider working around the problem with CSS box shadows.

以下是使用<$ c的示例 box-shadow 属性的$ c>传播半径值。

Here's an example using the spread-radius value of the box-shadow property.

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>

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

Here's a detailed explanation of how this method works:

• 在孩子悬停时，更改父容器的背景颜色（仅CSS）

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

这篇关于比例转换导致弹性布局渲染间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！