正如标题所说，我仍然遇到问题，我的 nextjs 页面上的某些文本看起来模糊，但在某些移动设备上在线。我在一些 iPhone 上注意到这一点最为明显。这对于移动设备来说是正确的，如果我使用控制台来测试移动布局。这只是我页面上的两个组件的问题。两张卡片都可以翻转以查看背面。它们还使用 Framermotion 进行动画处理。样式是用 Tailwind 完成的 页面其他部分的常规文本正常显示。

这是一个示例图片，您可以明白我的意思。较大的文本似乎很好，但较小的文本很模糊。我只包含了正面的屏幕截图。背面也有同样的问题。

该组件对应的代码在这里：

'use client';
import Link from "next/link";
import Image from "next/image";
import { motion } from 'framer-motion';
import { fadeIn } from '../../../utils/motion';

function ProjectCard({ index, id, title, icons, description, ghlink, pagelink }: any) {
    return (
        <motion.div
            variants={fadeIn('right', 'spring', index * 0.1, 1.75)}
            initial="hidden"
            whileInView="show"
            key={id}
            className="w-[280px] md:w-[300px] h-[440px] cursor-pointer group perspective my-4 md:m-6"
        >
            <div className="w-full h-full absolute border-2 rounded-[15px] preserve-3d group-hover:flip-cardY duration-500">
                {/* FRONT FACE */}
                <div className="absolute w-full h-full glassmorphism rounded-[15px] backface-hidden text-center flex flex-col items-center justify-between z-50">
                    <h3 className="pt-8 font-bold text-[26px] gap-4 text-[#18BC9C]">{title}</h3>
                    <div className="flex flex-row flex-wrap items-center justify-center md:m-1 z-50">
                        {icons.map(
                            (icon: any, id: any) => (
                                <p key={id} className="rounded-[25px] text-[10px] bg-[#34acc7] py-1 px-2 m-1 tracking-wide">#{icon}</p>
                            ))
                        }
                    </div>
                    <p className="text-[12px] font-bold text-[#18BC9C] p-3">Hover for more Info!</p>
                </div>
                {/* BACK FACE */}
                <div className="absolute w-full h-full bg-[#2E3A59] rounded-[15px] backface-hidden flip-cardY text-center flex flex-col p-2 items-center justify-between z-50">
                    <h3 className="p-4 font-bold text-[22px] gap-4 text-[#18BC9C]">ABOUT THIS PROJECT</h3>
                    <p className="text-[15px] text-justify">
                        {description}
                    </p>
                    <div className="flex flex-row gap-6 m-4 bottom-0">
                        {ghlink &&
                            <>
                                <Link href={ghlink} target="_blank">
                                    <Image alt="github" src="github.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                        {pagelink &&
                            <>
                                <Link href={pagelink} target="_blank">
                                    <Image alt="homepage" src="link.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                    </div>
                </div>
            </div>
        </motion.div>
    )
};

export default ProjectCard;

我尝试删除样式和成帧器运动动画，并尝试通过从头开始制作另一个组件并尝试找出错误来找到解决方案。两者似乎都不是解决方案。感谢您的帮助！