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/.
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:
.fix-vertical-subpixel-transition {
transform: translateX(1px);
}
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.