LiveView JS.show/hide. Race condition?

I have also noticed this issue in Firefox but not in Chrome.

And the last time I checked, I didn’t see it in Firefox either (which lends credence to your suggestion that it’s a race condition).

Thank you for confirming. I noticed it in all (three major) browsers. Very similar in all cases.

Here’s a screen recording

FWIW (in case someone might notice an error there) - the trigger is:

phx-click={JS.show(to: "#window-title-window", transition: "fade-in-scale", display: "flex")}

And the “fancy” CSS is defined as:

@keyframes fade-in-scale {
	0% {
		transform: scale(0.4) translateY(25px);
		opacity: 0;
	}

	90% {
		transform: scale(1.05) translateY(-3px);
		opacity: 0.9;
	}

	100%{
		transform: scale(1.0) translateY(0px);
		opacity: 1;
	}
}

.fade-in-scale {
	animation-direction: normal;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	animation-name: fade-in-scale;
}

A pull-request with quick-fix for the problem:

https://github.com/phoenixframework/phoenix_live_view/pull/3455