Fractional coordinates, in particular for vertical centering of an object, in chrome

Question

I use this css to vertically center objects inside my parent:

transform: translateY(-50%);

This is a trick, but in chrome the horizontal border lines (for example) are sometimes blurred due to the fractional coordinate due to division by 2 parent sizes.

I read that a possible solution might be to add:

transform-style: preserve-3d;

for the parent, but I see no effect.

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

I made this a very simple violin to show what I mean, I set a hard-coded fractional coordinate to make the problem. Use chrome, for example Safari does not have this problem.