Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Safari iOS broken #10135

Closed
Wiz1991 opened this issue Dec 22, 2024 · 4 comments · Fixed by #10176
Closed

Safari iOS broken #10135

Wiz1991 opened this issue Dec 22, 2024 · 4 comments · Fixed by #10176
Assignees
@jacobsfletch
Labels
area: ui Related to the admin panel.

Comments

@Wiz1991
Copy link

Wiz1991 commented Dec 22, 2024 •
edited
Loading

Describe the Bug.

Image
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
@Wiz1991 Wiz1991 added area: ui Related to the admin panel. status: needs-triage Possible bug which hasn't been reproduced yet labels Dec 22, 2024
@gkennedy87
Copy link
Contributor

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
Copy link
Author

Wiz1991 commented Dec 24, 2024

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
Copy link
Contributor

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
Copy link
Contributor

gkennedy87 commented Dec 26, 2024 •
edited
Loading

@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!

@gkennedy87 gkennedy87 mentioned this issue Dec 26, 2024
Merged
@jacobsfletch jacobsfletch linked a pull request Dec 26, 2024 that will close this issue
fix(templates): reorders postcss plugins #10176
Merged
@github-actions github-actions bot removed the status: needs-triage Possible bug which hasn't been reproduced yet label Dec 30, 2024
paulpopus pushed a commit that referenced this issue Jan 2, 2025
@gkennedy87
templates: reorders postcss plugins in the website template for tailw…
a000e4a 
…ind compatibility (#10176)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->

This The plugin order in postcss.config.js was causing UI rendering
issues in mobile Safari (#10135). This pull request affects the website
template and the vercel website template.

Current version:
```
// Website template:  /templates/website/postcss.config.js
// Vercel website template: /templates/with-vercel-website/postcss.config.js

export default {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}
```
PostCSS was loading Autoprefixer before Tailwind and the vendor prefixes
were not properly being prepended.

Fixed version (per [Tailwind
docs](https://tailwindcss.com/docs/browser-support)):

```
export default {
  plugins: {
    tailwindcss: {}, // this is first
    autoprefixer: {}, // this is second
  },
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jacobsfletch jacobsfletch

Labels
area: ui Related to the admin panel.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(templates): reorders postcss plugins gkennedy87/payload
4 participants
@gkennedy87 @jacobsfletch @HarleySalas @Wiz1991