title: Blurry text because translate(-50%, -50%) positions on half a pixel
body: <p>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.</p>
  
  <p>Is there perhaps a way to round the pixels to a whole number when using percentages?</p>