如何防止具有转换过渡的元素调整大小？
我遇到了这个问题，其中一些（不是全部）元素（我已对其应用了 150 毫秒的过渡持续时间以及悬停时的 translateY（变换）），在变换生效时似乎会更改大小。
有没有人也经历过这种情况，如果有的话，有人有解决方案吗？
PS：如果您想亲自查看这些按钮，它们位于 https://www.kubbur.com/< /a>.
I'm running into this issue where some (not all) elements, to which I have applied a 150ms transition duration as well as a translateY (transform) on hover, seemingly change size when the transform takes effect.
Has anyone experienced this as well, and if so, does anyone have a solution to this?
P.s. if you'd like to see these buttons for yourself they are live on https://www.kubbur.com/.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是因为按钮的宽度实际上是
148.92px，并且在静态时向下舍入到最接近的整数，在转换时向上舍入。我能想到的解决此问题的唯一方法是使用与
translate不同的方法或使用固定宽度。This is caused the width of the button is actually
148.92pxand is rounded down to the nearest whole number when static and up while transitioning.The only ways i can think of to fix this are using a different method than
translateor use a fixed width.正如 DvdRom 在该问题的另一个答案中发布的那样，此行为是由浏览器渲染具有子像素宽度的按钮引起的。在过渡期间，宽度从例如 148.92px 向下舍入，导致令人讨厌的行为。我发现这个问题的解决方案 - 不设置显式宽度 - 是在水平轴上应用一个小变换：
我不会声称知道为什么这有效（或者是否在 100% 的情况下有效），但有限的测试我确实显示出积极的结果。
As posted by DvdRom in another answer to this question, this behaviour is caused by the browser rendering the button with a subpixel width. During the transition the width is rounded down from e.g. 148.92px, causing the annoying behaviour. The solution I found to this problem - without setting an explicit width - is to apply a small transform on the horizontal axis:
I won't claim to know why this worked (or whether it will in 100% of cases) but the limited testing I did showed positive results.