Scaled text is blurry

Question

Im scaling up text on hover by a small amount. The text looks blurry. After searching for a solution, I have tried various methods other people mention, but these do not work.

eg.

backface-visibility: hidden;

I've also tried scaling down the text before hover and using hover to scale to a value of 1. This also fails to work.

How can I scale text without it being blurry?

Im using transform scale and the bug is in webkit browsers

What browser are you using? Do you see the same behavior if you try a different browser? — Grim..., Sep 25 '15 at 09:01
Have you already try - transform-style: preserve-3d; -webkit-transform-style: preserve-3d; This must be on the parent element. — Luís P. A., Sep 25 '15 at 09:02
What do you mean by scaling up? Are you changing the `font-size`? Are you using `transform: scale...`? Is your text in an HTML element, an SVG object or in a bitmap image? Please show some code. — Anders Marzi Tornblad, Sep 25 '15 at 09:02
Can you provide your code, both the HTML and CSS which is affected — Stewartside, Sep 25 '15 at 09:20

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You can scale font-size. Please check

span a{
    font-size: 24px;
}
span:hover a{
    color:#ba4a49 ;
    font-size: 240px;
    transition: all 2s linear;
}

<span><a href="#">Hello this looks blured during transition</a></span>

Please check This Link

edited May 23 '17 at 11:58

Community

1
1

answered Sep 25 '15 at 09:36

Vishu238

673
4
17

Scaled text is blurry

1 Answers1