Scale Transition shifting objects below

Hi Webflow Community!

I’m having trouble with scale interactions on my cards. When you hover over the first row and they scale, it pushes the row below down a little bit and looks glitchy.

I’ve played around with the CSS for -webkit-backface-visibility and -webkit-transform. I tried applying it to my card and grid-container classes, but with no luck. Any ideas on what I should be applying, and where?

Thanks!

Published Link
Read Only Link

hey @eddieshrake it looks like those boxes are jumping due to the border width, not the interaction, on the Div ‘card’. There is a border of 1px normally, and on hover there is a border of 3px. This will make the element take up more space, and thus push the other elements down. What you can do is make the border 3px. If you do this, the bottom row will not jump on hover since the border width is the same.

Here’s a screencast showing this: https://screencast.com/t/GsZZ2vP3C4d

1 Like

YES! Oh man, thanks so much @justin_c!

1 Like