Search code examples
htmlcsstransformchromiumblurry

Blurry font after applying transform

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?

Solution

  • 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.