Js seterusnya; teks dalam komponen dikaburkan pada beberapa peranti mudah alih
Seperti tajuknya, saya masih menghadapi masalah dengan beberapa teks pada halaman nextjs saya kelihatan kabur tetapi dalam talian pada beberapa peranti mudah alih. Saya perasan perkara ini paling ketara pada beberapa iPhone. Ini benar untuk peranti mudah alih, jika saya menggunakan konsol untuk menguji reka letak mudah alih. Ini hanyalah isu dengan dua komponen pada halaman saya. Kedua-dua kad boleh diterbalikkan untuk melihat bahagian belakang. Mereka juga dianimasikan menggunakan Framermotion. Penggayaan telah dilakukan dengan teks Tailwind Regular dari bahagian lain halaman dipaparkan secara normal.
Berikut adalah contoh imej supaya anda boleh melihat apa yang saya maksudkan. Teks yang lebih besar kelihatan baik, tetapi teks yang lebih kecil adalah kabur. Saya hanya memasukkan tangkapan skrin hadapan. Bahagian belakang mempunyai masalah yang sama.
Kod yang sepadan dengan komponen ini ada di sini:
'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;
Saya cuba mengalih keluar animasi gerakan gaya dan pembingkai dan cuba mencari penyelesaian dengan membuat komponen lain dari awal dan cuba memikirkan ralat. Kedua-duanya nampaknya tidak menjadi penyelesaian. terima kasih atas bantuan anda!
