0

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?

Jin
  • 21
  • 1
  • 5
  • See if this helps: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome – sallf Apr 09 '21 at 20:56
  • Does this answer your question? [Blurry text after using CSS transform: scale(); in Chrome](https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome) – Roy Apr 09 '21 at 21:10
  • Unfortunately no, I have tried a lot of those and none of them seems to help. – Jin Apr 09 '21 at 22:06
  • 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 Apr 09 '21 at 22:40
  • @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 Apr 09 '21 at 22:49
  • Its probably overkill, but you could try making the font as canvas elements instead. It won't be selectable, but would probably look better. – John Apr 09 '21 at 23:01

2 Answers2

1

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.

Jin
  • 21
  • 1
  • 5
0

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

dannymo
  • 390
  • 3
  • 13
  • I have already tried this answer. Unfortunately it doesn't seem to change the result in any way. – Jin Apr 09 '21 at 22:04