Rough scrolling with translate on hover

[bhatsudo]

Hello,
I have a card grid with an image on each card in my blog link: link to the page.

For the image in the card, I am using a transition animation like below:
"transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"

With the older version of tailwind, scrolling was smooth ( as far as I remember).
But with tailwind 2.0.1, I am noticing rough scrolling, and white bands appear on screen while scrolling with the cursor on those images. If I scroll on the sides, for example, scrolling is smoother.

I am not sure if it is an issue with tailwind or any other thing. But only change I did is the tailwind version update recently. So, asking here. Any inputs will help. Thanks.

[simonswiss]

Hey @bhatsudo 👋

Sorry I didn't get a chance to reply earlier. I just checked the paged you linked, and the transitions look good to me. Smooth, and no white bands anywhere.

Are you still observing the issue, and if yes, may you please do a little video/gif of it? With specifications of browser version/OS/device etc?

Thanks!

[bhatsudo]

Hey @simonswiss ,

thanks for the reply. It still happens usually on the first load of the website.

Browser: Google chrome 87.0.4280.88
Device: Lenovo yoga windows 10 laptop (i7)

Video link: https://vimeo.com/492109953
This also happens in the recent version of firefox.

[simonswiss]

This might have to do with the fact that some of your images are very large:

I don't know how the upgrade to Tailwind 2 would have anything to do with that roughness of animations.

Can you try resize the images to something much smaller, and see if the problem persists?

[bhatsudo]

Hello,

Thanks for the reply. That makes sense. Will do that.