Проблемы с макетом Flexbox/сетки Tailwind CSS в iOS и macOS Safari с использованием Next Js ⇐ IOS

[Anonymous]

Я разрабатываю веб-сайт с использованием 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"
&&



}











🍀 Extração loteria federal 🍀





Confira os detalhes da premiação:




{lottery.description
.split("\n")
.map((text: string, index: number) => (

{text}

))}













Mais informações

São [b]10 cotas premiadas[/b] de{" "}
[b]500 reais cada[/b]: 121212, 343434, 565656, 787878,
909090, 012345, 678901, 147369, 741963 e 123580.



Regulamento


{lottery.regulation.split("\n").map((paragraph, index) => (
{paragraph}
))}

Я ожидаю, что это будет так
введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/787 ... ng-next-js