一部の要素の変形中にぼやけたテキストWebkit

Question

ボタン上にカーソルを置いたり、フォームフィールドに焦点を合わせるときに、シンプルで素敵なトランジションエフェクトを持つWebアプリケーションを作成しようとしています。

フォームフィールドがページの通常の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

あなたはalign-items: center;とjustify-content: center;と組み合わせるdisplay: 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%; 
}