11
kiki
21h

In CSS, never ever enlarge anything by hover. There will exist a set of cursed cursor positions somewhere on the edge of fully zoomed out and fully zoomed in states, which will make your UI element twitch between two states at 60+ FPS.

If you want this effect, wrap the element you want to enlarge in a wrapper whose size won't change. Add :hover state on the wrapper, not the element, and change the element in that selector. It will make the curse go away.

wrong:
.zoom:hover { transform: scale(1.1) }

right:
.zoom-wrapper:hover .zoom { transform: scale(1.1) }

Comments
  • 1
    oh, and make sure that the wrapper is big enough to accommodate the enlarged element.
  • 1
    I’ve seen this so many times and my reaction is always 🤦‍♂️
  • 0
    @Lensflare How do you feel about it?
  • 0
    @yemploy a little bit annoyed and somewhat amused.
    It’s like watching a 3 year old trying to play guitar and making noise in a proud manner.
Add Comment