我正在使用 Next.js 和 Tailwind CSS 开发一个网站。虽然布局在大多数浏览器上都能完美运行，但我在 iOS 和 macOS Safari 上遇到了渲染问题。布局基于 Flexbox 和网格，问题似乎在于文本被截断和布局元素未正确对齐。这是问题的截图：
我的package.json：
{
"name": "pcsonhos-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prepare": "husky"
},
"dependencies": {
"@headlessui/react": "^2.0.3",
"@heroicons/react": "^2.1.3",
"@hookform/resolvers": "^3.6.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@redux-devtools/extension": "^3.3.0",
"@tanstack/react-query": "^5.28.14",
"@tanstack/react-query-devtools": "^5.37.1",
"axios": "^1.6.8",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^3.6.0",
"dayjs": "^1.11.11",
"flowbite": "^2.3.0",
"flowbite-react": "^0.8.0",
"js-cookie": "^3.0.5",
"lucide-react": "^0.378.0",
"next": "14.1.4",
"react": "^18",
"react-countup": "^6.5.3",
"react-dom": "^18",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.51.2",
"react-select": "^5.8.0",
"react-slick": "^0.30.2",
"react-toastify": "^10.0.5",
"react-use": "^17.5.0",
"sass": "^1.77.2",
"sharp": "^0.33.4",
"slick-carousel": "^1.8.1",
"sonner": "^1.5.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"tailwindcss-animated": "^1.1.0",
"zod": "^3.23.8",
"zustand": "^4.5.4"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-helmet": "^6.1.11",
"@types/react-slick": "^0.23.13",
"@types/validator": "^13.11.10",
"autoprefixer": "^10.4.19",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"husky": "^9.0.11",
"postcss": "^8.4.38",
"prettier": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.3",
"typescript": "^5"
},
"husky": {
"hooks": {
"pre-commit": "npm run build"
}
}
}
{
lottery.status === "ACTIVE"
&&
<section className="w-11/12 mx-auto lg:w-8/12 mb-5 ">
<LotteryCart lottery={lottery} />
</section>
}
<section className="mx-auto w-11/12 lg:w-8/12 lg:my-8 my-4">
<Ranking />
<div className=" md:hidden">
<AwardTitles />
</div>
<WinnersVideos />
<div className="w-full">
<div className="mb-8 flex justify-center">
<div className="mb-8 mt-4 cursor-pointer rounded-3xl p-1 shadow-lg ">
<h3 className="rounded-3xl px-3 text-center text-base font-medium sm:text-2xl">
🍀 Extração loteria federal 🍀
</h3>
</div>
</div>
<h2 className="mb-8 text-center text-2xl font-bold lg:text-3xl">
Confira os detalhes da premiação:
</h2>
<div className="">
<div className="border-1 rounded-lg border border-solid border-slate-500 p-4">
<div className=" overflow-y-auto">
{lottery.description
.split("\n")
.map((text: string, index: number) => (
<p className="lg:text-lg" key={index}>
{text}
</p>
))}
</div>
</div>
</div>
</div>
<ProductImages />
<div className="flex mt-8 gap-3 mb-2">
<div className=" p-3 border-4 rounded-full border-lime-500 bg-slate-100/15 shadow-lg shadow-lime-500/50 ">
<ReceiptText className="text-lime-500" />
</div>
<div className=" p-3 border-4 rounded-full border-lime-500 bg-slate-100/15 shadow-lg shadow-lime-500/50 ">
<Trophy className="text-lime-500" />
</div>
</div>
<p className="mb-4 mt-0 text-2xl font-bold lg:text-4xl">
Mais informações
</p>
<p className="font-medium text-gray-500 lg:text-xl">
São <strong>10 cotas premiadas</strong> de{" "}
<strong>500 reais cada</strong>: 121212, 343434, 565656, 787878,
909090, 012345, 678901, 147369, 741963 e 123580.
</p>
<Accordion
type="single"
collapsible
className="mt-10 transition-all duration-300 ease-linear"
>
<AccordionItem value="item-1">
<AccordionTrigger className="text-xl">Regulamento</AccordionTrigger>
<AccordionContent>
<article className="mt-2 text-base font-normal border border-slate-500 rounded-lg p-3">
{lottery.regulation.split("\n").map((paragraph, index) => (
<p key={index}>{paragraph}</p>
))}
</article>
</AccordionContent>
</AccordionItem>
</Accordion>
<FaqQuestions />
<Faq />
<br />
</section>
我期待成为这样的人 在此输入图片描述
这么久了问题解决了吗？它的解决办法是什么？我正在为同样的问题苦苦挣扎，但不知道如何解决它
