Blurry font after applying transform

0
votes

I am trying to achieve an animation akin to door/folder opening by applying rotateY to a div that contains texts and images. When applied, text elements become blurry: blurry_chrome

All that is applied to the divs are this:

.folder:hover {
  transform: translateZ(0) scale(1.12);
}

.folder:hover .front-cover {
  transform: perspective(1000px) rotateY(-20.44deg);
}

The problem persists even when one or the other is stripped away. Text is still blurry when only scale or rotateY is applied. On firefox, the issue seems to actually be far worse: blurry_firefox

I have tried quite a few hacks like translateZ(0), blur(0) and font-smoothing and it hasn't changed anything.

Is there no way to work around this if I want this effect?

Codepen: https://codepen.io/mello-code/pen/XWpzxWd

Edit: Some of the 'solutions' I have already tried:

  • -webkit-font-smoothing: subpixel-antialiased;
  • filter: blur(0);
  • transform-origin: 51% 51%;
  • making div sizes, elements, paddings and margins even
  • backface-visibility: hidden;
  • perspective(1px) (There is already perspective applied on hover)
  • zoom instead of scale

None of them seem to help. Any ideas?

2
htmlcsstransformchromiumblurry
See if this helps: stackoverflow.com/questions/14677490/… - sallf
Does this answer your question? Blurry text after using CSS transform: scale(); in Chrome - Roy
Unfortunately no, I have tried a lot of those and none of them seems to help. - Jin
Its blurring when you change the perspective with transform: perspective(1000px) rotateY(-20.44deg);. You can try using a different degree, or not rotating it at all. You can also get less blurring if you scale it up to 1.5 instead of 1.2. Alternatively, you can scale it up by changing the width, height, font sizes instead of using scale. - John
@John Yes, I can leave out the scaling but removing the rotateY altogether kinda defeats the purpose of trying to resolve the issue in the first place. I've tried different angles, but they seem to be all more or less the same. - Jin

2 Answers

1
votes

scale was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.

Additionally, removing perspective from transformation yielded crisp text and images.

0
votes

There is: -webkit-font-smoothing: subpixel-antialiased which should give you the sharpest result, but it is not standardized.

See more about font smoothing here:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

This answer might be also helpful:

Blurry text after using CSS transform: scale(); in Chrome