NO BUG: Hover effect - scale block - font compression

Bugs
1

BROWSER: Version 125.0.6422.142 (Offizieller Build) (arm64)
OS: MacOS Ventura 13.3
URL: https://michaelfudson.lol/

I applied hover state to block = scale x/y 1.1
Transition 0.5s

As you can see in the GIF, the font gets “compressed” on hover, when getting back to normal state it jumps back to normal.

Bildschirmaufnahme2024-06-17um16.38.11-ezgif.com-video-to-gif-converter

2

Hello,

what you can try is that you apply those two CSS properties to the card element.

    transform-origin: center;
    will-change: transform;

First one transform-origin: center; specifies point around which transformation is applied and second one will-change: transform; is kind of optimization for browser, that informs a browser what will change in the future.

I tested this on your website and it worked. And even before, I have 4k screen, with 125% scaling, and it was not so apparent at the beginning also.

Let me know if it helps in you case.

Regards, M.

2 Likes
3

Your Solution worked fine.

Thanks!

4

Perfect, I’m happy to hear that!

1 Like