Next js; Text in der Komponente ist auf einigen Mobilgeräten unscharf

Question

Wie der Titel schon sagt, habe ich immer noch Probleme damit, dass einige Texte auf meiner nextjs-Seite auf einigen Mobilgeräten verschwommen aussehen, aber online sind. Das ist mir bei einigen iPhones am deutlichsten aufgefallen. Dies gilt für mobile Geräte, wenn ich die Konsole zum Testen des mobilen Layouts verwende. Dies ist nur ein Problem mit zwei Komponenten auf meiner Seite. Beide Karten können umgedreht werden, um die Rückseite zu betrachten. Sie werden auch mit Framermotion animiert. Das Styling erfolgte mit Tailwind. Regulärer Text aus anderen Teilen der Seite wird normal angezeigt.

Hier ist ein Beispielbild, damit Sie sehen können, was ich meine. Größerer Text scheint in Ordnung zu sein, kleinerer Text ist jedoch verschwommen. Ich habe nur Screenshots von der Vorderseite eingefügt. Die Rückseite hat das gleiche Problem.

Der dieser Komponente entsprechende Code ist hier:

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

Ich habe versucht, den Stil und die Framer-Bewegungsanimation zu entfernen und habe versucht, eine Lösung zu finden, indem ich eine andere Komponente von Grund auf erstellt und versucht habe, den Fehler herauszufinden. Beides scheint keine Lösung zu sein. Vielen Dank für Ihre Hilfe!

Answer 1

经过一番挖掘，我仍然无法在其他地方找到有用的答案。我只是把文字放大了一点，这有点帮助。文字对我来说仍然很模糊，但至少现在是可读的。我还觉得有趣的是，一旦您将鼠标悬停在卡片上并且它开始转动，文本就会变得清晰。

目前唯一的解决方案是将文本设置为 13px，而不是最初的 10px