translateY (-50%) размытие дочерних элементов

Question

По какой-то причине мой код выравнивания по вертикали размывает некоторые, но не все дочерние элементы в Chrome и Safari.

Причиной этого является перевод (-50%), если я удалю это, тогда размытость исчезнет, ​​однако эффект вертикального центрирования будет потерян.

/* @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 */ 

Пробовал и проверенные методы, такие как ниже работы, но они нарушают вертикальное центрирование:

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

Answer 1

Единственный способ обойти это размыто вопрос, от того, что я мог видеть, чтобы изменить вертикальный метод выравнивания и вместо этого используйте display: table. Вот как я это сделал:

1) Держите HTML разметку той же

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

2) Изменение CSS к следующему:

/* @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 */ 

Answer 2

Столкнувшись один и тот же вопрос, пытаясь кнопки позиции в средний, но кнопка появилась при наведении на элемент родительского элемента, и каждый раз текст внутри был случайным образом разрезан.

Решение есть:

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

Перерывы ничего, фиксирует Chrome :)