CODEWITHSUNDEEP
cssgoogle-chromefirefox
Red
Red

Reputation: 7299

Text blurs when using transition and scale Chrome and FireFox

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.)
enter image description here

Desired result (This is working in IE)
enter image description here

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>

Upvotes: 15

Views: 3136

Answers (4)

Oleg
Oleg

Reputation: 24988

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:

Chrome Windows

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>

Upvotes: 5

Celestz
Celestz

Reputation: 311

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>

Upvotes: 2

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

Reputation: 214

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);

Upvotes: 4

Tim Gerhard
Tim Gerhard

Reputation: 3587

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.

Upvotes: -1

Related Questions