Question

我希望有人能帮助我。我在CSS网格中有一个div，将鼠标悬停在该网格上时希望沿x轴整齐地扩展。我为此使用了transform：scaleX（），但我注意到了一个非常烦人的事情：动画播放完毕后，在某些视口高度上，expanded元素要么增大要么缩小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

问题的屏幕截图（仅在某些窗口高度上发生）：

Answer 1

我认为CSS中不可能存在完美的1/3，在您的情况下，您正在使用1fr。 fr单元创建灵活的网格轨迹。它代表了网格容器中可用空间的一小部分，从而造成了像素分数的问题。

分数像素-当元素显示在屏幕上时，大多数浏览器会自然地将位置舍入到最接近的像素，根据css onhover的变化，您会发现分数像素值存在差异。

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

我个人会增加像素高度来解决此问题：）

转换：scaleX（）似乎改变了元素的高度

1 个答案: