Having issues with scale property on hover
Hello!
I've found myself unable to fix this weird blurring that happens to the card's text and image when I hover over and apply the scale property.
6 Replies
That’s just what happens when scaling. Text is tricky to render and so they have a lot of tricks to make it look good, and then you scale it and these tricks become irrelevant. I haven’t tried it before but you could try the
text-rendering property, I just avoid using scale so haven’t needed to fix it
Or you can mix the scale with a 3D tilt as that can hide blurring by adding in the distortion of perspectivea couple of things that might help.
- on the transition, to be more specific, name the property that is transitioning, so
transition: transform .2s ease-in-out
- you could try to see if there is a difference if you use scale: 1.05 instead of transform: scale(1.05)
- remove the backdrop-filter, I don't see this having any effectThanks for pointing the backdrop filter!! It was the main cause of the problem! ❤️
After removing it I still had some issues but I've encountered them before so I knew a
will-change: transform would fix them.
Can I ask you about the difference of using scale: 1.05 and transform: scale(1.05) ?there shouldn't be any difference using and from what I understand
Perfect 'cause I hadn't noticed any either 😂
yea, but there is a difference between "should" and "is". Sometimes there are some strange behaviors that can't be explained. just giving some options to try.
the main difference is the controllability, every transform-property it's own. (and you can still combine them, which could be handy)