css3 - CSS トランジション効果によりテキストがぼやけたりジッターしたりすることがありますか?

Question

gif をアップロードするだけです:

コード:

ステンシル:

リーリー

CSS:

リーリー

いくつかの無関係なスタイルが削除されました。Chrome のドロップダウン ボックスの右側にある小さな三角形のトランジション効果により、テキストがぼやけたりジッターしたりすることがわかっています。backface-visibility の場合: hidden;# を追加すると、## テキストは揺れませんが、それでもぼやけます。 Firefox では文字が 1 ピクセル太く表示されますが、許容範囲だと思いますが、IE9 ではこの問題は発生しません。 。神に導きを求めてください！

Answer 1

この発見はtransform: translate(-50%, -50%)导致抖动和模糊，改成transform: translate3d(-50%, -50%, 0)会解决一部分问题，主要是transform：translateZ(0)のおかげです。しかし、すべてのテキストがまだある程度ぼやけています。理由はわかりません。 ?

----------------更新---------------------
コードを再度整理しました 現在の状況はこんな感じです。 dialog-wrapper加上transform:translate3d(-50%, -50%, 0)的时候，文字不会抖动了，但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;を与えるとテキストは揺れませんが、それでもぼやけます。この問題をよりよく説明するために、簡単なデモを見て作成してみます。 。この問題はプロジェクトでよく発生しますが、適切な解決策は見つかりませんでした。 。

Answer 2

translateZ(0) を削除し、ハードウェア アクセラレーションを停止します