Search code examples
csstailwind-csscss-transforms

How can I prevent elements with a transforming transition from resizing?

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.

moving-pixels.gif

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/.

Solution

  • 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.