CSS - Blurry text after scale an element

Question

Im trying to apply a scale animation to a bootstrap button, but it has blurry text. I tried every answer posted here. How can I fix that?
Here is the code (It shows a little less blurry in the snippet than in my project):

button.btn-outline-dark{
    margin-top: 6%;
    width:30%;
    height: 17%;
    color: black;
}
button.btn-outline-dark:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.1);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;    
    -webkit-filter: blur(0);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text
</button>

There is alwyas an option to instead of zooming change manually button size and font size on hover. Maybe not ideal but the text won't be blurred for sure. — aMJay, Mar 23 '18 at 08:33
https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome — Heidel, Mar 23 '18 at 08:35
https://stackoverflow.com/questions/43455815/using-transform-scale-causes-blurry-text-only-on-windows-chrome — Heidel, Mar 23 '18 at 08:38

score 3 · Answer 1 · answered Mar 23 '18 at 08:39

As I said in the comment, here is a alternative of using zoom for getting the same effect:

button.btn-outline-dark{
    margin-top: 6%;
    color: black;
    transition:0.5s;
    padding: 10px 40px;
    font-size:14px;
}
button.btn-outline-dark:hover{
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text - Not Anymore
</button>

Obviously it might require some tweaking to get your exact styling desires right but should work fine.

That effect looks terrible in Chrome. Very jittery. – Turnip Mar 23 '18 at 09:29 — Turnip, Mar 23 '18 at 09:29
I agree, so why don't you show how to do it properly? – aMJay Mar 23 '18 at 10:24 — aMJay, Mar 23 '18 at 10:24

CSS - Blurry text after scale an element

1 Answers1