検索

ホームページ  >  に質問  >  本文

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

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

コード:

ステンシル:

リーリー

CSS:

リーリー

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

ringa_leeringa_lee2764日前2446

全員に返信(2)返信します

  • 滿天的星座

    滿天的星座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;を与えるとテキストは揺れませんが、それでもぼやけます。この問題をよりよく説明するために、簡単なデモを見て作成してみます。 。この問題はプロジェクトでよく発生しますが、適切な解決策は見つかりませんでした。 。

    返事
    0
  • PHP中文网

    PHP中文网2017-05-24 11:37:53

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

    返事
    0
  • キャンセル返事