transform：translateY（-50％）div要素が品質を失う

Question

私はジェネレータを設計しています。今日、リファクタリングコードでは、私の道のりで何度か見たことがある問題が発生しましたが、どういうわけか私はその存在に浸透しませんでした。つまり、CSSのtransform：translateY（-50％）で属性を追加した後のdivは、内部の要素の品質を失います。誰かがこれが起こっている理由を知っていますか？要素はぼやけており、特にフォントやバナーがあります。

私はこの行を削除した場合、正常に戻っ

#message { 
    width: 500px; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 50%; 
    margin-left: -250px; 
    position: fixed; 
    background: #fff; 
    z-index: 201; 
    padding: 20px; 
    box-sizing: border-box; 
} 

Answer 1

へのすべては、私は「それが原因OGであると信じています

垂直歌姫を中央に

を、このラインを使用しています半画素 "である。

divを-50％に変換するように指示します。 divの高さが101pxの場合、50％は50.5pxになり、半分のピクセルはありません。

これが問題であるかどうかは、半分にならずに2つに分割できる特定の高さを設定することで確認できます。