CODEWITHSUNDEEP
htmlcssalignmentcss-transforms
egr103
egr103

Reputation: 4008

translateY(-50%) blurring child elements

For some reason my vertical alignment code is blurring some but not all child elements in Chrome and Safari.

Whats causing it is the translateY(-50%), if I remove this then blurriness is gone however the vertical centring effect is lost.

/* @group Center all the things */
.center-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.center-wrapper .center {
    position: relative;
    overflow: hidden;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /* This fixes the blurred buttons but breaks centering

       -webkit-backface-visibility: hidden;
               backface-visibility: hidden;

       transform: translateZ(0);*/
}
/* @end */

Tried and tested methods such as below work but they break the vertical centring:

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
transform: translateZ(0);

Upvotes: 0

Views: 1785

Answers (3)

dcognata
dcognata

Reputation: 19

You can see the display table in action here.

.center-wrapper {
    min-height: 200px;
    padding: 0;
    display: table;
    width: 100%;
    background: black;
}

.center-wrapper .center {
    display: table-cell;
    vertical-align: middle;
    color: white;
}

.center-wrapper .center div {
    height: 40px;
    background: red;
    width: 50%;
    margin: 0 auto;
}
<div class="center-wrapper">
   <div class="center">
       <div>Centered content here</div>
   </div>
</div>

Upvotes: 0

Alex Kobylinski
Alex Kobylinski

Reputation: 339

Faced the same issue while trying to position buttons in the middle, but the button appeared on hover of the parent element and each time text inside was randomly cut.

The solution is:

.positioned-button {
   transform: translateY(-50%) scale(1);
   filter: blur(0);
   line-height: 1;
}

Breaks nothing, fixes Chrome :)

Upvotes: 2

egr103
egr103

Reputation: 4008

The only way around this blurry issue, from what I could see was to change the vertical alignment method and use display: table instead. Here's how I did it:

1) Keep HTML markup the same

<div class="center-wrapper">
   <div class="center">
       <p>Centered content here</p>
   </div>
</div>

2) Change CSS to the following:

/* @group Center all the things */

.center-wrapper {
    min-height: 100%;
    padding: 0;
    display: table;
    width: 100%;
}

    .center-wrapper .center {
        display: table-cell;
        vertical-align: middle;

    }

 /* @end */

Upvotes: 0

Related Questions