如何防止具有转换过渡的元素调整大小？

Question

我遇到了这个问题，其中一些（不是全部）元素（我已对其应用了 150 毫秒的过渡持续时间以及悬停时的 translateY（变换）），在变换生效时似乎会更改大小。

有没有人也经历过这种情况，如果有的话，有人有解决办法吗？

P.s.如果您想亲自查看这些按钮，它们位于 https://www.kubbur.com/。

Answer 1

这是因为按钮的宽度实际上是

148.92px

，并且在静态时向下舍入到最接近的整数，在转换时向上舍入。

我能想到的解决此问题的唯一方法是使用与

translate

不同的方法或使用固定宽度。

Answer 2

我回到这个老问题来回答它，因为我找到了一个似乎对我有用的修复方法。因此，如果其他人也遇到同样的问题，这可能会有所帮助：

正如 DvdRom 在该问题的另一个答案中所发布的，此行为是由浏览器以子像素宽度渲染按钮引起的。在过渡期间，宽度从例如向下舍入。 148.92px，导致恼人的行为。我发现这个问题的解决方案 - 不设置显式宽度 - 是在水平轴上应用一个小的变换：

.fix-vertical-subpixel-transition {
    transform: translateX(1px);
}

我不会声称知道为什么这有效（或者是否在 100% 的情况下有效），但我所做的有限测试显示了积极的结果。

我必须说，尽管我很失望，这个论坛的评分如此之低，以至于一个相当有效的问题被否决，似乎没有其他原因，只是它不符合如何提出问题的任意标准。 （这是提供反馈很重要的事情，就像A Haworth所做的那样并且合理地这样做，而不是让问题本身看起来无效。）