animate:flip breaks hover/hit testing in Safari when animated elements are above a fixed painted overlay

[pekeler]

Describe the bug

In Safari, animate:flip can leave transformed elements with incorrect hover/hit-testing after the animation.

• only Safari is affected
• Chrome behaves correctly
• the bug appears only for elements whose z-index is higher than a fixed full-screen painted overlay
• elements below that overlay behave correctly
• after the flip sequence, hover lands on the wrong tile / drifts

The issue reproduces in the default animate:flip path. A manual tick-driven transform workaround avoided it in my app.

Note: I also see issues with crossfade in the same kind of setup. A local fork that drives the crossfade animation via tick instead of css also works around it there.

Reproduction

https://svelte.dev/playground/5ee78b6142a1475e8353eec58ca66a6c Sorry about the complexity in here, but it appears all of it is necessary.

Chrome (this is how it's supposed to be looking and behaving):

Safari (notice the hover highlight is wrong and items 4 through 6 have the wrong transformation):

Logs

System Info

System:
    OS: macOS 26.3.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 748.73 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 25.2.1 - /opt/homebrew/bin/node
    npm: 11.6.2 - /opt/homebrew/bin/npm
    pnpm: 10.11.0 - /opt/homebrew/bin/pnpm
    bun: 1.3.11 - /Users/pekeler/.bun/bin/bun
    Deno: 2.6.6 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 146.0.7680.154
    Firefox: 148.0
    Safari: 26.3.1
  npmPackages:
    svelte: ^5.54.1 => 5.54.1

Severity

annoyance

[JetLua]

Just updated to iOS 26.4 and noticed Safari finally fixed this issue. 👀

I had the same issue before.