sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.17k stars 4.08k forks source link

Svelte spring store continuously adding values when switching tabs #9141

Open eriksachse opened 1 year ago

eriksachse commented 1 year ago

Describe the bug

When a spring animation is in progress and the user switches tabs in Chrome, an unexpected behavior occurs where the spring value is continuously applied to the associated element. Subsequently, upon returning to the original page, the spring animation plays back at an accelerated pace. For visual reference, I have attached a video demonstrating this issue.

Reproduction

https://svelte.dev/repl/6807679be5754699814ba39af6c6c9be?version=4.2.0

https://github.com/sveltejs/svelte/assets/24212703/b498dd41-2cb5-4ea3-b7e5-65484164adf2

Logs

No response

System Info

System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M1 Pro
    Memory: 181.75 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    pnpm: 7.17.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 116.0.5845.110
    Edge: 114.0.1823.55
    Safari: 16.5

Severity

annoyance

PuruVJ commented 1 year ago

Can confirm, I've seen this as well

Prinzhorn commented 1 year ago

Related / duplicate https://github.com/sveltejs/svelte/issues/7010 (via https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+spring+tab)

JuchokJuk commented 4 months ago

My little workaround https://github.com/sveltejs/svelte/issues/7010#issuecomment-2080599879