'CSS: Using transition for paragraphs causes text to tremble

There is a sample code available. Please run it.

When you hover your mouse over text, you see a tremble or distortion (I don't know what it's called) in text.

This problem occurred in other situations besides transition:scale.

In general, I would like to know what the source of the problem is and how I can solve it.

div {
    font-size: 3.6rem;
    transition: all 0.3s;
  
}

div:hover {
    transform: scale(0.98);
}
<div >
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
</div>
htmlcss


Solution 1:[1]

I don't know what causes the distortion, but you can use font-size instead of transform: scale

div {
    font-size: 3.6rem;
    transition: all 0.3s;
  
}

div:hover {
    font-size: 3.52rem;
}
<div >
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
</div>

Solution 2:[2]

you need to describe that what type of transition you need on hover.. simply change the font-size in hover and your transition will work .. as

div {
font-size: 3.6rem;
transition: all 0.3s;

}

div:hover {
    font-size: 2rem;
}

<div >
<p>
   Lorem ipsum dolor sit amet
</p>

Solution 3:[3]

it's the scale value that is causing this with text it's not very optimised, try this:

div {
transition: 0.3s all ease-in-out;
transform-origin: 50% 50% 50%;
backface-visibility: hidden;
}
div:hover {
transform: scale(0.9) translate3d(0,0,0);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Yappeter
Solution 2 Taqi Raza Khan
Solution 3

Related Questions