Safari iOS broken

[Wiz1991]

Describe the Bug.

There is something wrong with the viewport.
Scroll does not work at all
Date picker does not follow theme and size ios zooms in when you focus on input, its impossible to use rhe date picker
Sidebar wont close when you open new page
It seems like the dashboard also relies on some default css, which is different on safari? That or theres a css reset which doesnt work on safari. You cant see how the padding is all wrong in the screenshot.

Sadly i cant provide more info than that as i cant really open dev tools on mobile.

Reproduction Steps

Just open any dashboard on ios.

Environment Info

Latest

[gkennedy87]

I wasn't able to recreate this issue. Could you provide some additional information?

• Which version of iOS are you running?
• Which iOS device?
• Do you have any extensions installed for Safari? (if so, try disabling and try reloading the page)
• Have you edited any of the templates? If so, what did you add/remove?

[Wiz1991]

I wasn't able to recreate this issue. Could you provide some additional information?

• Which version of iOS are you running?
• Which iOS device?
• Do you have any extensions installed for Safari? (if so, try disabling and try reloading the page)
• Have you edited any of the templates? If so, what did you add/remove?

18.2 on 15 Pro

I have adguard and dark reader, both of which are disabled.
I've made no edits to payload itself.

What seems to work is if i disable content blockers and then keep refreshing and go through pages it starts working on some point.

When loading in the app on homepage it flashes with everything being full width then goes to the screenshot.

[HarleySalas]

I wasn't able to recreate this issue. Could you provide some additional information?

Which iOS version were you on, that you weren't able to recreate this issue in Safari? It's been on-going for me with an older device running iOS 15~ and a newer device running 18~

[gkennedy87]

@HarleySalas @Wiz1991 I wasn't able to recreate the alignment issues exactly but encountered some different ones when I deployed the website template. I had a sneaking suspicion that the issue was due to Tailwind and Safari, rather than Payload itself and I believe I found a solution.

Find the postcss.config.js file in your root directory.

If it looks like this:
export default { plugins: { autoprefixer: {}, tailwindcss: {}, }, }

Rewrite it to look like this:
export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

I believe the underlying issue was CSS browser compatibility issues. Autoprefixer prepends browser specific prefixes like "-webkit-". If it was being loaded before Tailwind then those necessary prefixes were not being added.

Source: Tailwind Docs - Browser Support

Please Let me know if this works!