Chrome is now blurring text when using transform translateY with percent
<p>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:</p>

<p><a href="https://davidwalsh.name/css-vertical-center" rel="nofollow noreferrer">https://davidwalsh.name/css-vertical-center</a></p>

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

<p>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.</p>

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

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

<p>So I have two questions :</p>

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

<p>thanks for your help,</p>

<p>David</p>

<p>PS : 
all the old solutions expressed here 
<a href="https://stackoverflow.com/questions/6411361">Webkit-based blurry/distorted text post-animation via translate3d</a> 
don't work </p>