Text blurs when using transition and scale Chrome and FireFox

Question

when I use both transition andtransform, then the animations are not very smooth on both chrome andfirefox. It blurs when you hover over it. The only browser on which it is normal is IE.

Chome / FireFox (Note the text, when the animation starts it start to be blurry. When it finishes it pops back to smooth letters.)

Desired result (This is working in IE)

How do I make these animations also smooth on chrome and firefox?

Snippet:

as soon as the transition is complete, the element has to be focused again. Thats what it looks like now on chrome and firefox.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

@TimGerhard Yes it starts blurring when you hover over it. In IE this doenst happen. — Red, Mar 13 '18 at 13:45
possible duplicate of https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome#16878602 — Temani Afif, Mar 17 '18 at 12:31
https://www.html5rocks.com/en/tutorials/internals/antialiasing-101/ Anyone who suffers from blurry text should read this old article by Paul Lewis. In short it's mainly all about Subpixel antialiasing quirks. — dziku86, Feb 24 '21 at 08:51

Oleg · Accepted Answer · 2018-03-22T20:45:03.017

You can accomplish a very similar effect using font relative units (em) and increasing the element font-size on hover.

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

Note this generally considered to be less performant than using transforms, at the very least try to position the element so that there are fewer re-flows around it.

Chrome 64 on Windows 10:

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: .875em; /* =14/16 or whatever your base font size is */
  color: #fff;
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
  transition: all .33s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
  transition: all .33s ease-in-out;
}

<span style="position: relative; left: 2.5em; top: 1em;">
  <button>Hover me</button>
</span>

Although the blur is indeed gone, the button starts growing from the top left. How can I make it grow from the center? Because this looks wierd in the design. — Red, Mar 22 '18 at 09:17
@Red negative margins or `transform: translateX(-50%) translateY(-50%);` would do the trick; keep in mind you'll have to offset the transform — Oleg, Mar 22 '18 at 20:41

score 4 · Answer 2 · answered Mar 13 '18 at 14:26

4

I managed to remove the blur on Firefox with:

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

backface-visibility: hidden;

or ( or both )

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

transform: translateZ(0);

answered Mar 13 '18 at 14:26

Атанас Атанасов

214
2
13

4

Don't just copy-past [answers](https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome#16878602) – Ron van der Heijden Mar 16 '18 at 09:20
When using this its still kinda blurry on chrome. – Red Mar 23 '18 at 07:40

score 2 · Answer 3 · answered Mar 20 '18 at 08:29

You can try if perspective can fix your issue, it fixes the text into it's z-axis, no technical idea why.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  -webkit-perspective: 1;
  perspective: 1;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

I dont see any improvement in your fiddle. It still makes the letters blur. — Red, Mar 21 '18 at 10:46

score -1 · Answer 4 · answered Mar 13 '18 at 13:54

-1

The best and so far only way I found which removes the blur effect is to scale down the element first, and then scaling it up to its original size. Here's an example:

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  padding: 20px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  transform:scale(0.7);
}

button:hover {
  transform : perspective(1px) scale(1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

I know this is not the desired result but I looked quite hard and didn't find anything better.

answered Mar 13 '18 at 13:54

Tim Gerhard

3,477
2
19
40

1

The text still blurs when the animation start. – Red Mar 21 '18 at 10:40
I'm aware of that but its way less blury than any other solution provided so far – Tim Gerhard Mar 21 '18 at 10:41
Hm, not on my desktop? Its still the same, only the animation makes the button much bigger then the questions fiddle. – Red Mar 21 '18 at 10:43
I think it only tricks your eyes. Because the letters are smaller and the button bigger. Its not what I want though. The button must stay the way its in the questions fiddle, I only wanna get ride of the annoying blur effect. It makes the animation so uggly :| – Red Mar 21 '18 at 10:48
I think you gotta live with that until chrome patches it. You could use an image though! – Tim Gerhard Mar 21 '18 at 10:48
Yes perhaps, maybe a chrome dev will read and patch it. Who knows ;) – Red Mar 21 '18 at 10:52

Text blurs when using transition and scale Chrome and FireFox

4 Answers4