css - 在某些元素 Webkit 上转换期间的模糊文本

Question

我正在尝试创建一个网络应用程序，当将鼠标悬停在按钮上或关注表单字段时，它具有一些简单、漂亮的过渡效果。

如果表单字段位于页面上的常规 div 中，并且您将注意力集中在它上面，表单字段“弹出”就很好，没有问题。

但是，当表单字段位于在悬停过渡期间弹出的灯箱中时，灯箱中的所有文本都会变得模糊。一旦转换完成，它就不再模糊了。

举几个例子:

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

以上工作正常。当专注于文本字段时，它会“弹出”transform: translate(-2px,-2px); 完全没有模糊。

<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%;
}