Product Cards: Slight position shift on hover zoom

[nicklepine]

Problems

• There is a bit of position shift with the zoom animation on hover of images on product cards: video

• A slight blur also occurs when hovering off

Adding will-change: transform; to the image solves the shift

[nicklepine]

Note from @sofiamatulis

Note: will-change should not be overused, otherwise it may hurt performance. More here: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

This may fix this issue in regard to the flickering: https://screenshot.click/15-18-kf5n8-phqgf-TS.mp4

https://shopify.slack.com/archives/CB0JT58RE/p1623716413307100

For the blur, we may be able to leverage this: https://usefulangle.com/post/307/css-transform-scale-preserve-image-quality

However, it will all depend on the quality of the image the merchant used. If we are zooming in in a low quality image, it will be more blurry

[kimberlyoleiro]

This looks to be solved with the newest animation work. @ludoboludo could you please triple-check for me and close this ticket?

[ludoboludo]

Still a thing from what I can see 👍