gif をアップロードするだけです:
コード:
ステンシル:
リーリーCSS:
リーリー いくつかの無関係なスタイルが削除されました。Chrome のドロップダウン ボックスの右側にある小さな三角形のトランジション効果により、テキストがぼやけたりジッターしたりすることがわかっています。backface-visibility の場合: hidden;# を追加すると、## テキストは揺れませんが、それでもぼやけます。 Firefox では文字が 1 ピクセル太く表示されますが、許容範囲だと思いますが、IE9 ではこの問題は発生しません。 。神に導きを求めてください!
滿天的星座2017-05-24 11:37:53
この発見はtransform: translate(-50%, -50%)
导致抖动和模糊,改成transform: translate3d(-50%, -50%, 0)
会解决一部分问题,主要是transform:translateZ(0)
のおかげです。しかし、すべてのテキストがまだある程度ぼやけています。理由はわかりません。 ?
----------------更新---------------------
コードを再度整理しました 現在の状況はこんな感じです。 dialog-wrapper
加上transform:translate3d(-50%, -50%, 0)
的时候,文字不会抖动了,但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;
を与えるとテキストは揺れませんが、それでもぼやけます。この問題をよりよく説明するために、簡単なデモを見て作成してみます。 。この問題はプロジェクトでよく発生しますが、適切な解決策は見つかりませんでした。 。