Element transforms to half-pixel and text is now blurry

So I have a Bootstrap Carousel, with a caption that I'm trying to vertically center.

HTML:

This is where a bunch of cool lorem ipsum goes

Watch Video

CSS:

div.carousel-caption{
top: 50%;
transform: translateY(-50%);
bottom: initial;
}

This works fine and great until you look at the text. The element seems to land on a half-pixel, therefore causing the text to be blurry. So I did some research for some solutions and these are all the ones I tried:

• transform-style: preserve-3d; (on parent element/div.item)
• transform: perspective(1px) translateY(-50%) translate3d(0,0,0);
• transform: translateZ(0);
• -webkit-font-smoothing: antialiased;
• backface-visibility: hidden;

Unfortunately none of the above worked. So I'm still looking for a solution to this blur. Whether it be by using plain css or not. Perhaps a Javascript form of vertical centering bootstrap caption. Heres some pictures for reference:

Text that is blurry when vertically centered:

Text that isn't blurry when not centered