When using transitions e.g out/in and dynamically showing an element, svelte leaks infinite style tags

[dtzxporter]

Describe the bug

Using an element that renders based on a variable:

{#if showDiv}
<div out:fly={{x: 7, y: 7, duration: 150}} in:fly={{x: 7, y: 7, duration: 150}}>hi</div>
{/if}

Every time you toggle showDiv, a style tag is created and then emptied but remains in the DOM indefinitely:

Removing the transitions solves the issue.

Reproduction

EDIT:

Reproduced (keep right clicking and see style tags get created and fail to clean up:
https://svelte.dev/repl/c89a3e9fb2ab4932bc0624e338ee147e?version=3.46.2

Too lazy to go and figure out which version broke, but 3.25.x doesn't leak, latest version(s) leak.

Logs

No error logs.

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 957.99 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    npm: 8.2.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 96.0.2
    Safari: 15.1
  npmPackages:
    svelte: ^3.0.0 => 3.46.2 
    webpack: ^5.35.0 => 5.66.0

Severity

annoyance

[dtzxporter]

Seems related to #7119 as that transition issue also doesn't happen on 3.25.0.

Looks like a race condition...

[MacFJA]

Duplicate of #7164 ?

[martenfrisk]

I'm also having this problem. Based on your Repl, it looks like it occurs on 3.46.0 but not 3.45.0.

3.46.0 added the style: directive so that's probably the cause of the issue.

[bluwy]

Yeah looks like a duplicate of #7164. Let's move the discussion there.