Chrome is now blurring text when using transform translateY with percent

问题

Since a few days, I'm experimenting a pretty big issue when using the very cool technique for vertically centering a div with css3 transform (transform: translateY(-50%); ) described here:

https://davidwalsh.name/css-vertical-center

Indeed, the elements (text or images) included in this div get blurry.

I tried a lot of techniques (transform: translateZ(0); backface-visibility; scale(1); translateX( calc( -50% + 0.5px ) ); filter: blur(0); and so on). But nothing actually works.

The only one that works is to use another technique for vertically centering the div, like display:table-cell.

But, for obvious reasons (like the obligation to add a div container), I'd rather not to do so.

So I have two questions :

first, do you know a technique that works ? second, is it a new issue with the last (or latest) version(s) of Chrome ?

thanks for your help,

David

PS : all the old solutions expressed here Webkit-based blurry/distorted text post-animation via translate3d don't work

回答1:

For now, I found only one good solution:

transform: translate(-50%, -50.1%)

• 0.1% - in general user can't see this
• No need to calc value

Hope chrome will fix it - the bug exists since 2014))))

来源：https://stackoverflow.com/questions/39751749/chrome-is-now-blurring-text-when-using-transform-translatey-with-percent