4

I use this css to vertically center things inside their parent: 

transform: translateY(-50%);

This does the trick, but in chrome the horizontal lines of the border (for example) are sometimes blurred, because of the fractional coordinate, due to the division by 2 of the parent dimensions.

I have read that a possible solution could be to add:

transform-style: preserve-3d;

to the parent, but i don't see any effect.

Is there a real solution without using js to round the coordinates?

I made this very simple fiddle to show what i mean, i put a hard coded fractional coordinate to force the problem. Please use chrome, for example Safari doesn't have this problem.

Massimiliano Carosi
  • 284
  • 4
  • 20
  • Have you tried using a borderless wrapper, which center's using translate and then have a child with the border? – Asons Jul 31 '16 at 16:17
  • i am not sure i got the point, any child would still have a fractional coordinate, i am afraid, wouldn't it? – Massimiliano Carosi Jul 31 '16 at 16:20
  • Very right :) ... don't know until one tried, deleted it – Asons Jul 31 '16 at 16:35
  • Browsers are currently very inconsistent when it comes to sub-pixel rendering... Is there a reason you cannot use js? It might be the simplest solution at this point. – mhatch Jul 31 '16 at 16:43
  • @mhatch, I have a web application developed for safari that now I need to convert also for chrome, this is one of the few issues I found. To use js means to add js logic and call a function to manually center elements whenever the browser is resized, i can do this of course, but a pure css solution mean also to avoid documentation revision and specific tests for this new functionalities – Massimiliano Carosi Jul 31 '16 at 17:03
  • 2
    Might be relevant: http://stackoverflow.com/questions/29543142/css3-transformation-blurry-borders – Aziz Jul 31 '16 at 17:18
  • May I ask how often you have encountered this and why not use another method which will not give you this issue in the first place? – Asons Jul 31 '16 at 17:26
  • See the answer to mhatch, that's the reason. I have already developed a simple solution in js that works, but this would mean to write down more documentation and to perform test I am trying to avoid – Massimiliano Carosi Jul 31 '16 at 17:32

0 Answers0