Might be an Alpine Performance bug on x-show with transition

[MuzafferDede]

Tricky one,
https://codepen.io/muzafferdede/pen/XWmLKJx

Screencast:
https://gofile.io/d/0bqt5t

When there is an element with any attribute in x-show element, things gets weird.

In this example:
Try to click on toggle button quickly multiple times. You will end up with half way done transition. open is true but transition is not completed.

Once you remove id on inner element, things are fine. So i guess at some point Alpine doesn't has enough time to complete walking on dom and skip some tasks?

[SimoTod]

I think there is an old ticket mentioning it. It's a known issue with slow transition or, in your case, fast clicking and it's still unresolved.
I'm happy for you to take a stab at it if you can think of a good way to fix it.

[SimoTod]

A similar thing was mentioned at the bottom of this thread: #170
They might be related, I think it would be good to stop/cancel the previous transition/timeout when starting a new one so they don't overlap

[MuzafferDede]

Yeah, i will definitely take a stab at it. Wanted to make sure if anything new but yeah, i still don't understand why if you remove an inner element with any attribute, it will work fine. Feels to me an overlap thing while walking as well. Oh boy, tough one!

[SimoTod]

Yeah there might be some other nasty bug so they may or may not be related. Definitely worth investigating.

[SimoTod]

@MuzafferDede is that a real piece of code you use on a website? I had a look at the original code and it's due to the listener on the scroll. Your link (the one where you define x-on:click) points to #last, you added an element using not a generic id but the matching id which means that the browser tries to scroll to that element when clicking a link, this causes the scroll listener to run every time. Since you are reassigning the timeout variable in the handler, you also queue another component refresh which might duplicate the hide part of the transition.
It's definitely a weird behavior but driven by a specific implementation.
I think that fixing the generic performance issue which happens on slow transition would also fix this edge case.
Basically every time a transition start which should immediately terminate any pending transition on the same object, call any pending steps from it and cancel the timeout. This will make sure that any new transition starts from a consistent state and previous transitions won't overlap the current one.

Easier said than done, though

[MuzafferDede]

@SimoTod well said. I think it would't be any clear than how you described. I didn't notice i left href and id piece of code which is actually a real use case on my re-building website project.

https://nemrut.co

This is a use case in Navigation section. x-data is defined on Navigation element with atTop and navOpen. I wanted to use x-show.transition on Navigation but i face the bug so i changed it back to x-show without any transition.

goal

• on window scroll fixed header
• navigation open close with transition
• clicking on navigation item closes navigation and page scrolls to the target

current logic

• atTop set via window scroll. I used setTimeout and clearTimeout because i didn't want it to calculate each time on scrolling. Eventually i removed this behavior. (because trying to figure out the bug)
• navOpen set open/close stage of the Navigation. Navigation also gets some classes depending on atTop.
• navOpen set to false if one of the Navigation link clicked. Reason is i need to close Navigation and scroll to target section using href.

I am on still on it.

[MuzafferDede]

@SimoTod I have also updated the server with this new pr fix build, you can check how it works now.

https://nemrut.co