CODEWITHSUNDEEP
csstexttranslateblurry
Miranda Breekweg
Miranda Breekweg

Reputation: 217

Blurry text because translate(-50%, -50%) positions on half a pixel

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?

Upvotes: 3

Views: 1728

Answers (2)

lastr2d2
lastr2d2

Reputation: 3968

Since May 2024 we can use round()

transform: translate(round(down,calc(-50%),1px), round(down,calc(-50%),1px))

MDN link

Meanwhile, CSS.supports() can be used to check the whether the round operator is supported.

Upvotes: 0

MateBoy
MateBoy

Reputation: 454

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

Upvotes: 1

Related Questions