CODEWITHSUNDEEP
htmlcsstransformchromiumblurry
Jin
Jin

Reputation: 19

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:

None of them seem to help. Any ideas?

Upvotes: 0

Views: 5799

Answers (3)

Jim
Jim

Reputation: 3684

Another possibility is other styles on the element or its parents. In my case border-radius being applied to the same element, plus a translate, scale, and scroll bars combined to make the text blurry. It is worse at some scales than others, and at different monitor resolutions. This is fine in firefox and safari.

How it looks on a 1440p monitor:

enter image description here

https://codepen.io/culli/pen/poBzPGJ

https://issues.chromium.org/issues/41321934?pli=1

Upvotes: 0

Jin
Jin

Reputation: 19

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.

Upvotes: 0

dannymo
dannymo

Reputation: 408

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

Upvotes: 0

Related Questions