CSS Transform Scale makes text blurry

Question

I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.

Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:

How to force re-render after a WebKit 3D transform in Safari

http://duopixel.com/stack/scale.html

I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!

eg of transition code:

-moz-transform:scale(1.05,1.05);

http://jsfiddle.net/VcVpM/1/

Answer 1

While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.

.cta:hover {
    width: 500px;
    height: 500px;
    font-size: 400%;
}

The only other work-around "might" be to use animation @keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.

Answer 2

I found this on CSStricks.com:

It appears if you set your transforms to also use

translate3d( 0, 0, 0)

it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2

I use Jquery and needed my slider's H3 tags to be fixed. Larger text wasn't blurry for me. I wrote the line

$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px");

and that fixed it best for me. I needed the -webkit- in front of my transform. I don't know why, as others said not to use it. I uploaded an image of the way it looked with some different settings.