Css 在某些元素Webkit上变换时文本模糊

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

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

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

给你举几个例子：

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

上述方法并不奏效。在

transform:translate（-2px，-2px）

灯箱中的所有文本/元素等在0.5s的转换过程中变得模糊

以下是我当前使用的样式：

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

您可以在这里查看一个简单的JSFIDLE。。它可能不是很好的代码，因为我复制并粘贴了我需要显示的内容。由于某种原因，jsfiddle站点上的情况没有我们站点上的那么糟糕，但它仍然存在一些问题。只是在烦我。

检查这个

您可以使用

显示
：flex属性与
对齐项组合
：居中和
调整内容
：居中

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

你能给我们提供一些有用的代码片段吗？@Subgeo我已经添加了jsfiddle链接。。您可以在这里找到它：-它在JSFIDLE上并没有在我们的站点上那么糟糕，但它仍然存在，并且引人注目。它似乎只在webkit上运行。。。这可能与
.lightbox content
类有关，因为当我从该类中移除变换（将lightbox内容置于页面中心的变换）时，所有模糊都会完全消失。。。有没有其他方法可以让div完全集中在页面上？谢谢，我现在理解并回答了这个问题；）注意
边距：0属性。如果你添加Flexbox，它可以完美地将你的内容放在页面的中心。就是这样！很抱歉延迟回复，我一直很忙，还没来得及处理。非常感谢。
.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%;
}