Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
animate:flip breaks hover/hit testing in Safari when animated elements are above a fixed painted overlay | GoodFirstPicks

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

sveltejs/svelte 1 comments 6d ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeSvelteTypeScript

Why this is a good first issue

Browser-specific rendering issue requiring careful handling of transforms and z-index.

AI Summary

The issue involves incorrect hover/hit-testing in Safari when using `animate:flip` with elements above a fixed overlay. The problem is reproducible and appears to be specific to Safari's rendering engine. A fix would need to address the transform behavior without introducing regressions in other browsers.

Issue Description

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): Image

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

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

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • browser-specific behavior
  • potential cross-cutting changes
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno