transform: scaleX() 似乎改变了元素的高度答案

【问题标题】：transform: scaleX() seems to change element's heighttransform: scaleX() 似乎改变了元素的高度
【发布时间】：2019-01-07 08:28:54
【问题描述】：

我希望有人可以帮助我。我在 CSS 网格中有一个 div，我想在悬停时沿 x 轴整齐地展开。为此，我使用了 transform: scaleX() ，但我注意到一些非常烦人的事情：动画播放完毕后，在某些视口高度上，展开的元素要么增长要么缩小 1 个像素。如果我给 div 一个像 200px 这样的静态高度，则不会出现此问题，但我不想这样做。有谁知道为什么会发生这种情况，以及如何最好地解决它？我必须完全放弃转换，而是做一些类似 transition:width 的事情吗？

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="green"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1px;
}

body > div {
  background-color: lightblue;
  overflow: hidden;
}

.green {
  background-color: #090;
  transform-origin: left;
  transition: transform 250ms ease-in-out;
}

.green:hover {
  transform: scaleX(2);
  transition: transform 250ms ease-in-out;
 }

Codepen

问题的屏幕截图（仅在某些窗口高度出现）：

【问题讨论】：

这是因为grid-gap: 1px 而发生的，因为它会在 div 结束后立即开始缩放，但是在 2 个网格框之间有 1px 的间隙，因此悬停的元素会保持较短1px 覆盖两个网格框。输入grid-gap:0px，看看这是不是你想要的。
唉，不。我摆脱了网格间隙，它仍然设法缩小了 1 个像素，露出下面的黑色背景。

标签： css scale css-transforms css-grid

【解决方案1】：

我认为 CSS 中不可能存在完美的 1/3，在您的情况下，您使用的是 1fr。 fr 单元创建灵活的网格轨道。它代表网格容器中可用空间的一小部分，这会产生小数像素的问题。

小数像素 - 当元素显示在屏幕上时，大多数浏览器会自然地将位置四舍五入到最近的像素，根据您的 css onhover 您会注意到小数像素值的差异。

您可以阅读这篇文章以了解更多信息 - Sub-Pixel Problems in CSS

我个人会添加像素高度来解决问题:)

【讨论】：

请看一下这支笔codepen.io/girish/full/qyxaWd，在某些情况下这个问题仍然存在，但我使用percentage 值而不是fr 单位。希望它有所帮助:)
感谢您的回复。我想在这种情况下没有办法挽救变换比例，我可能只会使用过渡长度。出于某种原因，这行得通。