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!

Answer 1

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

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