Next.js移动端部分组件文本模糊问题求助

大家好，我遇到了一个挺头疼的问题：我的Next.js页面上有两个带翻转动画的卡片组件，在部分移动设备（尤其是一些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;

我已经尝试过这些排查方法，但都没能解决问题：

• 移除部分Tailwind样式
• 去掉Framermotion的动画效果
• 从零开始重构组件，逐步排查可能的问题

有没有大佬遇到过类似的情况，能给点排查思路或者解决方案吗？非常感谢！

备注：内容来源于stack exchange，提问作者Paul S.