Svelte 5 doesn't produce the last tween value in transitions

[cdcarson]

Describe the bug

In Svelte 5, depending on the transition duration (and maybe the easing function,) the final tween value(s) are not produced. For example, this...

  const modalSlide = (_node: HTMLElement, { duration = 500 }) => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    const calculatedDuration = mediaQuery && mediaQuery.matches ? 0 : duration;
    return {
      delay: 0,
      duration: calculatedDuration,
      css: (t: number) => {
        let tyPct = 100 - sineInOut(t) * 100;
        console.log(tyPct);
        return `transform: translateY(${tyPct}%)`;
      }
    };
  };

...produces this...

# Opening...
100
99.72609476841366
98.90738003669028
97.55282581475768
95.67727288213004
93.30127018922192
90.45084971874738
87.1572412738697
83.4565303179429
79.38926261462365
75
70.33683215379
65.45084971874738
60.39558454088796
55.22642316338266
49.99999999999998
44.77357683661731
39.60441545911202
34.54915028125262
29.663167846209987
24.999999999999986
20.610737385376353
16.543469682057093
12.84275872613027
9.549150281252622
6.698729810778062
4.322727117869945
2.447174185242318
1.0926199633097156
0.2739052315863262

# closing...
0
0.2739052315863404
1.0926199633097156
2.447174185242318
4.322727117869945
6.698729810778076
9.549150281252622
12.842758726130299
16.543469682057108
20.610737385376353
25.000000000000014
29.663167846209987
34.54915028125262
39.60441545911204
44.773576836617345
50.00000000000003
55.22642316338269
60.39558454088798
65.45084971874738
70.33683215379003
75.00000000000001
79.38926261462368
83.45653031794292
87.15724127386972
90.45084971874738
93.30127018922195
95.67727288213005
97.55282581475768
98.90738003669028
99.72609476841367

This doesn't happen in Svelte 4. The same function produces...

 # opening...
 100
 99.72611666036758
 98.90746712481942
 97.55301997210692
 95.6776136226117
 93.30179377850047
 90.45158833870401
 87.15822225460194
 83.4577754502641
 79.39078755484664
 75.00181377743124
 70.33893678984661
 65.45323996495894
 60.398247741281494
 55.22933924489576
 50.00314159265149
 44.77690952321175
 39.60789815229141
 34.55273572376508
 29.66680322836517
 25.003627686453996
 20.61429574166
 16.546893989655004
 12.845982173457656
 9.55210501658415
 6.701348042077029
 4.324942243562617
 2.4489219392976906
 1.0938395575282698
 0.2745404777821818
 3.9478418045746366e-7
 0
 # closing...
 0
 0.27388333963243383
 1.0925328751805807
 2.4469800278930762
 4.322386377388298
 6.698206221499547
 9.548411661295987
 12.841777745398076
 16.54222454973592
 20.609212445153375
 24.998186222568762
 29.661063210153387
 34.546760035041075
 39.601752258718506
 44.77066075510425
 49.99685840734851
 55.22309047678826
 60.3921018477086
 65.44726427623492
 70.33319677163483
 74.996372313546
 79.38570425834
 83.45310601034498
 87.15401782654234
 90.44789498341585
 93.29865195792298
 95.67505775643738
 97.55107806070231
 98.90616044247173
 99.72545952221782
 99.99999960521582
 100

Perhaps related:

• Svelte 5 (alpha 90): broken svelte transitions with {@render children()}. Issue starts from alpha 82. #11001
• Svelte 5: delayed transitions don't apply initial CSS #10876
• Svelte 5: animate:flip can cause transition glitches and overlapping on outro #10251

Reproduction

https://github.com/cdcarson/svelte-transition-bug

To see that this bug does not happen in Svelte 4 do:

git switch svelte-4
pnpm i
pnpm dev

Logs

No response

System Info

System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1
    Memory: 52.81 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: 8.15.6 - ~/Library/pnpm/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.107
    Edge: 123.0.2420.81
    Safari: 17.4
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.95

Severity

annoyance