-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
View Transition Animation Not Working for Async Components in MDX Files #11531
Comments
Hi @double-thinker, what a cool reproduction! I have to admit that I have no idea what's going on at the moment. It might take some time to analyze and fix this. Thanks for the offer to submit a PR. Since you did, do you happen to have any idea what's causing this behavior yet? |
The HTML sources of the two iframes only differ in one item. The CSS for the view transition of the second paragraph is missing in the MDX case. The CSS gets generated for the The special thing about the While the generated CSS makes it from the _metadata to the Maybe there is a missing |
Maybe it is related with this #7761 and withastro/roadmap#707:
|
Ok, I'm not 100% sure, but it seems like this issue is related to the problem described in withastro/roadmap#707. All transition:* props in an async component cannot add head CSS because it's already sent to the client. A workaround is to wrap the async element and move up the transition:* properties to the parent: <div transition:animation="slide">
<AsyncElement />
</div> See the workaround here: https://stackblitz.com/edit/github-p2qmkm-bhkwwb?file=src%2Fcomponents%2FExample.astro |
This one is a bit hard to fix. The gist of the problem goes like this: In In Ultimately, it's hard to fix this. We could try to create a prepass for Another example why streaming is a PITA 🫠 I'm not sure how to do a nice fix for this at the moment, a workaround on the user-side may be needed.
It's not directly related I think as that proposal is for fixing renders in Astro files. |
However, the workaround that moves them up is actually working. It seems like an MDX with sync components has no problem putting VT's CSS in
From my understanding, the solution proposed in #707 could help here. If any non-Astro component has |
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
Async components (with a module-level await) do not work with view transitions only if rendered within an MDX page. The same async component is correctly animated within a standard Astro page.
What's the expected result?
The animation should work regardless of whether it is used within MDX or not.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-p2qmkm?file=src%2Fpages%2Findex.astro
Participation
The text was updated successfully, but these errors were encountered: