BasicTransition applying position: fixed to one of the animated elements

Bug description I have noticed this when using the TabsTransition with a layout that contains a div with overflow: hidden, to make the website content the size of a mobile phone screen. The TabsTransition uses the Svelte’s fly transition, which displaces the element. The incoming element got cut off properly by the overflow: hidden, but the element that was disappearing wasn’t cut off. I have looked in the dev tools to see what happens during the animation and noticed that the element that is disappearing got a position: fixed property applied. This causes my problem. The overflow: hidden property is ignored and the element doesn’t get cut off correctly.

To better see what we are aiming for and what happens, here is a screenshot of the application. The incoming element at the right gets cut off properly while the other one stays in the screen in it’s whole beauty.

Here is the part of the _layout.svelte file responsible for these routes. (We are using Tailwind)

<div class="overflow-hidden">
    <slot decorator={TabTransition} />
</div>

As one of the elements is cut off properly, I believe that the other one can be fixed too.

Version

"@roxi/routify": "^2.12.4",

[jakobrosenberg]

@JakubBlaha does this fix it?

https://github.com/roxiness/routify/releases/tag/v2.15.2

[jakobrosenberg]

Great. Closing this for now. 🙂