次の js; 一部のモバイル デバイスではコンポーネント内のテキストがぼやけます

Question

タイトルにあるように、一部のモバイル デバイスではオンラインでも、nextjs ページのテキストの一部がぼやけて見えるという問題がまだ発生しています。私はこれを最も顕著に感じたのは一部の iPhone です。コンソールを使用してモバイル レイアウトをテストする場合、これはモバイル デバイスにも当てはまります。これは、私のページ上の 2 つのコンポーネントに関する問題です。どちらのカードも裏返すと裏面が表示されます。また、Framermotion を使用してアニメーション化されます。スタイル設定は Tailwind で行われました。ページの他の部分の通常のテキストは正常に表示されます。

ここにサンプル画像があるので、私が何を言いたいのかがわかります。大きな文字は問題ないように見えますが、小さな文字はぼやけてしまいます。前面のスクリーンショットのみを掲載しました。背中も同じ問題を抱えています。

このコンポーネントに対応するコードは次のとおりです:

リーリー

スタイルとフレーマーのモーション アニメーションを削除して、別のコンポーネントを最初から作成してエラーを特定することで解決策を見つけようとしました。どちらも解決策ではないようです。ご協力いただきありがとうございます！

Answer 1

少し調べてみましたが、他の場所ではまだ役立つ答えが見つかりません。文字を少し大きくしただけで、少しは楽になりました。テキストはまだぼやけていますが、少なくとも読めるようになりました。また、カードの上にカーソルを置くとカードが回転し始めると、テキストが明確になるのも興味深いと思います。

現時点での唯一の解決策は、テキストを元の 10px ではなく 13px に設定することです。