在某些元素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%; 
}