flickering on iOS browsers

[bugproof]

Describe the bug

The images when the drawer opens flicker on iOS browsers. This is not happening in Dialog. Only this drawer.

https://github.com/user-attachments/assets/1e70973d-42ab-4b41-a613-f1453f62edf2

Reproduction

Will provide later

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 18.45 GB / 63.09 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: 1.1.31 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.7.2 => 2.7.2
    bits-ui: ^1.0.0-next.22 => 1.0.0-next.22
    svelte: ^5.0.5 => 5.0.5
    typescript: ^5.6.3 => 5.6.3
    vaul-svelte: ^1.0.0-next.0 => 1.0.0-next.0

Severity

annoyance

[huntabyte]

Oh that's a nasty one. Mind providing a reproduction so I can better debug this issue? Thank you!

[bugproof]

I think I found the issue but I gotta understand it more. Will come up with a repro or solution soon...

The property that causes this is: transform: translate3d(0px, 0px, 0px) on the image wrapper.

It's used for the carousel... for some reason this causes flicker/incompatibility with vaul drawer

[shyakadavis]

Might be unrelated, might be 😅

https://x.com/Rich_Harris/status/1848771715603525834

[bugproof]

I think I fixed it 😄

I added style="-webkit-backface-visibility: hidden; backface-visibility: hidden;" to Drawer.Content

See this: https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker

@shyakadavis This might also fix the issue who knows lol

[shyakadavis]

@bugproof I'm guessing this comment pertains to your fix as well, right?

https://x.com/JulianGarnier/status/1848826557038477655

[bugproof]

I don't know anymore. I thought I fixed it but it's there again. But yes it's something with iOS and transform: translate3d. I will play with it more and try to make some repro link.

The current situation is: I have a carousel which also uses transform: translate3d and I have vaul which also uses translate3d. Now this is real tricky to point out the culprit. Is vaul or carousel buggy?

This happens only when interacting with drawer like for a split second iOS browser stops rendering my carousel (this is why flicker/blink). I'm going to try to find it and bring you back more details.

[bugproof]

solved it forever, it's some weird rendering bug with iOS GPU acceleration...

I added this to the flickering carousel slides and it solved the issue with vaul making other elements flicker...

[data-carousel-slide] {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

I'm closing it since it's more likely iOS/apple specific issue https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker