Flickering text on css transform scale

Question

people. I`m new to this, and I have an issue with some text flickering when I try to scale the div up. Can, please, somebody look at my case at help me with a solution to this? Thanks in advance! The pen is this https://codepen.io/alinfarcas/pen/eYXqwLM

The best solution that I came up with was

&__parc {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform 0.3s, box-shadow 0.3s;

    &:hover {
      transform: scale(1.04);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
    }
  }

But, in this case, even if the text is not flickering anymore, it becames blurry when I hover, and remains blurry even after the hover stops. Can u help me? Thank you!

Which browser are you using? Your Codepen seems to work fine on my browser (Safari on Mac). — Brett Donald
– Brett Donald, Commented Feb 27, 2024 at 6:24
I`m using Chrome on Windows 10, but the issue is present also in Firefox and Edge, because I checked. — Alin Farcas
– Alin Farcas, Commented Feb 27, 2024 at 6:28
scaling text on a non 4k/retina display will cause artefacts. text rendering is a super complicated issue and the glyphs are usually optimized for the particular font-size. if you just transform-scale ist, you get a lot of aliasing etc. — Marian Theisen
– Marian Theisen, Commented Feb 27, 2024 at 6:32

adam blaydes · Accepted Answer · 2024-02-27 09:57:37Z

0

I’ve had this issue many times here’s what I use

-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale

answered Feb 27, 2024 at 9:57

adam blaydes

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alin Farcas Over a year ago

I tried with your fix, but it is still not working. I tried all the combinations between what I had and what you gave me. :( Thanks anyway, for the answer!

Collectives™ on Stack Overflow

Flickering text on css transform scale

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related