在某些元素Webkit轉換期間模糊文本

Question

我試圖創建一個web應用程序時，有一些簡單，漂亮的過渡效果，當懸停在按鈕或側重於表單域。

如果表單字段在頁面上的常規div中，並且您專注於它，表單字段'彈出'就好，並且沒有問題。

但是，如果表單字段在懸停轉換期間彈出的燈箱中，則燈箱中的所有文本都變得模糊。一旦變換完成，它就不再模糊。

你一些例子：

<div> 
    <b>First Name:</b> 
    <input type="text"> 
<div> 

以上優良工程。當專注於文本領域時，它會彈出'就好，沒有任何模糊。

<div class="lightbox"> 
    <div class="lightbox-content"> 
     <b>Option 1:</b> 
     <input type="text"> 
    </div> 
</div> 

以上不能正常工作。在transform: translate(-2px,-2px)期間，該燈箱中的所有文本/元素等在0.5秒的過渡期間變得模糊。

這裏是我目前使用的樣式：

.lightbox { 
position: fixed; 
top: 0; 
left: 0; 
background-color: rgba(0,0,0,0.3); 
width: 100%; 
height: 100%; 
transform: translateY(-105%); 
-webkit-transform: translateY(-105%); 
transition: transform 0.001s, opacity 0.75s; 
-webkit-transition: transform 0.001s, opacity 0.75s; 
opacity: 0; 
} 

.lightbox-content { 
max-height: 80%; 
overflow: auto; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
background: white; 
border-radius: 10px 0 10px 0; 
padding: 10px; 
} 

你可以在這裏查看一個簡單的jsfiddle .. https://jsfiddle.net/uneeuh08/它可能不是很大的代碼，因爲我複製並粘貼正是我需要的表現出來。它在jsfiddle網站上並沒有因爲某種原因而在我們的網站上出現問題，但它仍然存在一些問題。只是竊聽我。

Answer 1

選中此項JSFiddle。

您可以使用display: flex;財產與align-items: center;和justify-content: center;結合。

你的CSS類將變爲：

.lightbox { 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.3); 
    width: 100%; 
    height: 100%; 
    transform: translateY(-105%); 
    -webkit-transform: translateY(-105%); 
    transition: transform 0.001s, opacity 0.75s; 
    -webkit-transition: transform 0.001s, opacity 0.75s; 
    opacity: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.lightbox-content { 
    max-height: 80%; 
    overflow: auto; 
    position: absolute; 
    margin: 0; 
    background: white; 
    border-radius: 10px 0 10px 0; 
    padding: 10px; 
    width: 50%; 
}