다음 js는 일부 모바일 장치에서 구성 요소의 텍스트가 흐려집니다.

Question

제목에서 알 수 있듯이 일부 모바일 장치에서는 내 nextjs 페이지의 일부 텍스트가 흐릿하게 보이지만 온라인으로 보이는 문제가 여전히 발생합니다. 나는 일부 iPhone에서 이것을 가장 눈에 띄게 발견했습니다. 콘솔을 사용하여 모바일 레이아웃을 테스트하는 경우 모바일 장치의 경우에도 마찬가지입니다. 이것은 내 페이지에 있는 두 가지 구성 요소의 문제일 뿐입니다. 두 카드를 뒤집어 뒷면을 볼 수 있습니다. 또한 Framermotion을 사용하여 애니메이션을 적용했습니다. Tailwind를 사용하여 스타일을 지정했습니다. 페이지의 다른 부분의 일반 텍스트가 정상적으로 표시됩니다.

여기에 샘플 이미지가 있으므로 무슨 뜻인지 알 수 있습니다. 큰 텍스트는 괜찮아 보이지만 작은 텍스트는 흐릿합니다. 전면 스크린샷만 담았습니다. 뒷면에도 같은 문제가 있습니다.

이 구성 요소에 해당하는 코드는 다음과 같습니다.

으아악

스타일과 프레이머 모션 애니메이션을 제거하고 처음부터 다른 구성 요소를 만들어 오류를 파악해 해결 방법을 찾으려고 노력했습니다. 둘 다 해결책이 아닌 것 같습니다. 당신의 도움을 주셔서 감사합니다!

Answer 1

좀 찾아본 후에도 다른 곳에서는 여전히 유용한 답변을 찾을 수 없습니다. 방금 텍스트를 조금 더 크게 만들었고 그것이 약간 도움이 되었습니다. 텍스트는 여전히 나에게 흐릿하지만 적어도 지금은 읽을 수 있습니다. 또한 카드 위로 마우스를 가져가면 카드가 회전하기 시작하면 텍스트가 명확해진다는 점도 흥미로웠습니다.

현재 유일한 해결책은 텍스트를 원래 10px 대신 13px로 설정하는 것입니다