2

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

Community
  • 1
  • 1
Jean-Paul Samuel
  • 51
  • 2
  • 6
  • Possible duplicate of [Webkit-based blurry/distorted text post-animation via translate3d](http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d) – Shannon Young Sep 28 '16 at 15:53
  • None of the solutions provided in the sus-mentionned URL actually works. I think the issue appears with Chrome 53 version. – Jean-Paul Samuel Sep 29 '16 at 07:58
  • 2
    By `translateX( calc( -50% + 0.5px ) );` did you mean `translateY(`…`);`? – Sebastian Simon Feb 01 '17 at 23:41

1 Answers1

0

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))))

egor.xyz
  • 2,847
  • 1
  • 21
  • 18