Screenshots appear white on iOS Safari 18.0.1

[max-got]

Describe the Problem

Screenshots on svelte.dev show up completely white on iOS Safari 18.0.1. Interestingly, everything works fine in dev mode (pnpm dev --host (???)) .

Image

Describe the proposed solution

Could try changing --safari-fix to translateZ(0). However, I can't verify if this works since the dev environment doesn't reproduce the issue and the repo doesn't let me pnpm build && pnpm preview the site.

Reproduction

1. Visit svelte.dev on iOS Safari
2. Current CSS:

.screenshots {
/* ... */
  filter: grayscale();
  -webkit-transform: var(--safari-fix); /* = translate3d(0,0,.01) */
}

System Info

• Device: iPhone 11 Pro
• OS: iOS 18.0.1
• Browser: Safari
• URL: svelte.dev

[Rich-Harris]

I'm going to start billing Apple for the amount of time we have to waste fixing things for their godawful browser

[trueadm]

I'd love to know why Vite or whatever is breaking the CSS here. Seems strange why it would change it.

[Rich-Harris]

Vite's doing the right thing — turning translate3d(0, 0, 0) to translate(0, 0) is a perfectly valid optimisation. It (or whatever it's delegating to for this stuff) might need to make an exception because of the Safari bug though