3

I was having trouble with transform: translate(-50%, -50%) in combination with a google font in chrome. This combination made the text look blurry. I noticed it was caused by the translate and after looking at the position of the element, I noticed it was positioned on half a pixel. I was able to fix it with translate(calc(-50% - 0.5px), -50%), but rather have a better solution than this workaround.

Is there perhaps a way to round the pixels to a whole number when using percentages?

Miranda Breekweg
  • 207
  • 1
  • 2
  • 11

1 Answers1

1

You could try setting transform-style: preserve-3d on the parent or maybe modify your transform property to also include perspective(1px).

MateBoy
  • 454
  • 1
  • 4
  • 14