Next js ; le texte du composant est flou sur certains appareils mobiles

Question

Comme le titre l'indique, j'ai toujours des problèmes avec une partie du texte de ma page nextjs qui semble floue mais en ligne sur certains appareils mobiles. J'ai remarqué cela particulièrement sur certains iPhones. Cela est vrai pour les appareils mobiles, si j'utilise la console pour tester la mise en page mobile. C'est juste un problème avec deux composants sur ma page. Les deux cartes peuvent être retournées pour voir le verso. Ils sont également animés à l'aide de Framermotion. Le style a été réalisé avec Tailwind Regular. Le texte provenant d'autres parties de la page s'affiche normalement.

Voici un exemple d’image pour que vous puissiez voir ce que je veux dire. Un texte plus grand semble correct, mais un texte plus petit est flou. Je n'ai inclus que des captures d'écran avant. L'arrière a le même problème.

Le code correspondant à ce composant est ici :

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

J'ai essayé de supprimer le style et l'animation de mouvement du framer et j'ai essayé de trouver une solution en créant un autre composant à partir de zéro et en essayant de comprendre l'erreur. Ni l’un ni l’autre ne semble être une solution. Merci pour votre aide!

Answer 1

Après quelques recherches, je ne trouve toujours pas de réponse utile ailleurs. J'ai juste agrandi le texte un peu et cela m'a un peu aidé. Le texte me semble encore flou, mais au moins il est lisible maintenant. Je trouve également intéressant qu'une fois que vous survolez la carte et qu'elle commence à tourner, le texte devient clair.

La seule solution pour le moment est de définir le texte sur 13 px au lieu des 10 px d'origine