CODEWITHSUNDEEP
twitter-bootstraptext
Jonathan Daniel
Jonathan Daniel

Reputation: 1

Transform property makes my text blurry

<div class="container valign-transform">
    <div class="row">
        <div class="col-sm-12">
            <h4>Text</h4>
        </div>
    </div> 
 </div>

.vertical-center {
    position: relative;
    top: 50%;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

An example can be found on CodePen: http://codepen.io/LuckyDaniel/pen/YXdxrr

I am trying to vertically align my container by appending the class 'vcenter-transform'. The problem is that my container has display:table on pseudo-selector (clearfix) and that makes all my text to be blurred.

Is there a way to fix this problem?

Upvotes: 0

Views: 1539

Answers (2)

nnamerz
nnamerz

Reputation: 168

Seems like removing content: ''; fixes your issue:

.container:before, .row:before {
    display: table;
}

Alternatively, adding position: absolute; also seems to correct your issue:

.container:before, .row:before {
    display: table;
    content: "";
    position: absolute;
}

Upvotes: 0

pabekjunior
pabekjunior

Reputation: 21

Add this to your container in Bootstrap. Fixed the problem for me in the codepen you provided.

-webkit-filter: blur(0px);

And for other browsers:

-moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);

Upvotes: 1

Related Questions