Next js; text in component is blurred on some mobile devices

Question

As the title says, I'm still having issues with some of the text on my nextjs page looking blurry but online on some mobile devices. I've noticed this most noticeably on some iPhones. This is true for mobile devices, if I use the console to test the mobile layout. This is just an issue with two components on my page. Both cards can be flipped over to view the back. They are also animated using Framermotion. Styling was done with Tailwind Regular text from other parts of the page displays normally.

Here is a sample image so you can see what I mean. Larger text seems fine, but smaller text is blurry. I've only included front screen shots. The back has the same problem.

The code corresponding to this component is here:

'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;

I tried removing the style and framer motion animation and tried to find a solution by making another component from scratch and trying to figure out the error. Neither seems to be a solution. thanks for your help!

Answer 1

After some digging, I still can't find a helpful answer elsewhere. I just made the text a little bigger and that helped a little bit. The text is still blurry to me, but at least it's readable now. I also find it interesting that once you hover over the card and it starts to spin, the text becomes clear.

The only solution currently is to set the text to 13px instead of the original 10px