时间戳

首页 > 解决方案 > transform: scaleX() 似乎改变了元素的高度

css - transform: scaleX() 似乎改变了元素的高度

问题描述

我希望有人可以帮助我。我在 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;
 }

密码笔

问题截图（仅在特定窗口高度出现）： 在此处输入图像描述

标签： cssscalecss-transformscss-grid

解决方案

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

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

您可以阅读这篇文章以了解更多信息 - CSS 中的子像素问题

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

推荐阅读