Svelte 5: Fill forward animation permanently takes over the animated properties and prevents any further modifications

[Xerios]

Describe the bug

I've noticed a quite odd behavior related to transitions in svelte 5, most likely due to usage of Web Animations API.

The moment a container executes its transition, the nested transition no longer updates its dimensions properly. I've attached a simple accordion test with steps to demonstrate the issue.

It doesn't seem to be related to any lingering css properties, nor does it seem like a browser-specific issue (because same behavior happens on Firefox and Chrome). However, once it happens, height style property can no longer be changed by anything other than another transition.

Root-cause of the issue

The culprit seems to be fill: "forwards", which is discouraged as stated in the official spec. Despite its useful function, the real behavior is that it keeps the animation active indefinitely.

WAAPI properties have higher priority than css and style properties, so once fill:"forward" is used, the only way left to modify those animated properties would to use even more animations.

This is a pretty severe issue as not everyone is aware of this "lock", and there's virtually no way to even see in devtools or console any explanation or reason to why suddenly some element style properties are no longer changeable. Many builtin transitions and animations rely on width and height, so this bug will lead to many confused developers.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1TUY6bMBC9ytSrKrtqEpJI_SEQabVfPUPphxcPibXGtuxJmghxj_71BL1bj1AZcCBNWxU-EDN-b2bePDeskgo9Sz83TPMaWcqerWVzRhcbfvwJFSGbM2-OrgyRzJdOWtoVuiBZW-MInsvSOCGNhsqZGmbL5BpZ9gSzQmfJCNTZCDEWdd6QO2LbcWbecg1eGcoLdkAuCrZbewJPaFN4UcYj0EF6qKTzBIvw7LIkoHq8kKcIF0hcKl-wLlPQWHYI_LncRouhXGiur6bREwrg174fDyj3BwJtQBm9RwfWGYtOXcCht1gSiqdJX12xf_TW5e3kp6BPsxrKI4GpKvj5_duPycFkPJklQp7igMnthDF3G2dzVhshK4mCpZ3y83H78dz_eQAAz50HFFKvVg4VVx63E3804JUUCO3gj54wIce1lySNnnWnS6M9wYFrofBFyfINcnh8gnwXid-F7-9OCpKWinufF-y6nUHVm2RYLrrRC9Mc4Zkmm8jCjiAoMpoiS0JwV1BUelR9iLweiYKhdVqG7vNmMkoLV_IPySJS9IibTfVszYOsuqnbuzGuvoFRv7TTNw42bf7uBgxT3FRsElm1QdchoDNPF9XzCXlajqZvepaau73UKawd1rDqltfG1gOglzqeFtJbxS9ppfC87UNfpaBDul6t3v8VvAw7iRQBmsJ6Oy2_cOH-pfDRnu9Jhrkj_pWXb3tnjlosSqOMS-GhxPBuNgOn5UJIvU_DSJEuS6IO9zfmS_sLdPsi3zsFAAA=

Logs

No response

System Info

This behavior is consistent between Firefox and Edge(Chrome)

Severity

blocking all usage of svelte

[Xerios]

Resolved by #11216