Element transforms to half-pixel and text is now blurry

Question

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

HTML:

<div class="item image1 active">
    <div class="carousel-caption">
        <h1 class="color-primary-0">Create Memories</h1><br>
        <p class="color-primary-2">This is where a bunch of cool lorem ipsum goes</p><br>
        <a href="#"><button class="button1 bg-primary-2"><span>Watch Video</span></button></a>
    </div>
</div>

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

Unfortunately with transform, there is no way to avoid sub-pixel precision when using percentages. If you could set the height of your caption to an even amount of pixels, that would likely work. Otherwise, you'll have to use a different method to center your content. flexbox is great at this. — Vestride
Have you tried to use only transform: perspective(1px) translateY(-50%)? ... Also, for webkit browsers, resetting the blur can do wonders -webkit-filter: blur(0px) — Ason

Benjamen Kuhman Benjamen Kuhman · Accepted Answer · 2017-04-23T17:07:45

Well after some more digging, I decided using flexbox would be the easiest way to achieve this vertical centering without blurry text (As suggested by Vestride). Fortunately it doesn't seem to cause any complications with the Bootstrap carousel when applied as such:

div.carousel-caption{
    position: static;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

It seems like it should work for most browsers according to this. IE might suffer a little. But it worked fine for my IE 11.

Element transforms to half-pixel and text is now blurry

1 Answers