alexgipi
commented
2 months ago I'm closing it, since I missed that there is already a closed discussion about this. https://github.com/withastro/roadmap/discussions/717
This component by Martin allows this use-case
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
I'm experiencing unexpected behavior when using transition:persist in Astro. When I apply transition:persist to a component containing a video, the transition works as expected: the video persists and does not reset during the transition.
However, when applying the same transition to a component containing an iframe, the content of the iframe refreshes during the transition. This behavior is inconsistent with how videos are handled, and it seems that iframe content does not persist in the same way.
I’m unsure if this is due to a limitation in how transitions work with iframes or if it’s a bug in Astro. Any guidance on whether this can be fixed or if there are alternative approaches to achieving persistent iframe content during transitions would be greatly appreciated.
A minor detail
In the minimal reproducible example, because of how Stackblitz works, the iframe doesn't load, but in Stackblitz preview mode, the iframes load correctly. However, the problem with refreshing looks both ways
What's the expected result?
Expected Result
When applying transition:persist to a component containing an iframe, I expect the content of the iframe to remain unchanged and persist throughout the transition. Similar to how video elements maintain their current state and do not reload or restart, the content of the iframe should continue to be displayed without refreshing or reloading during the transition. This is crucial to ensure a smooth user experience, especially when the iframe content is dynamic or when a reload would be disruptive.
Real-World Use Case
In my specific case, the problem arises in a "Cart Drawer" where the payment form is a Stripe Element, loaded within an iframe. This behavior significantly impacts the user experience.
The expected flow is that the user adds products to the cart, the drawer is displayed, and upon clicking "Complete Purchase," the Stripe payment form loads within the iframe. If the user completes the payment at this point, everything works correctly. However, if the user navigates to another page to add a final product or for any other reason, the iframe reloads, causing the Stripe form to reset or disappear. This is problematic because any data the user has already entered into the form would be lost, resulting in a poor user experience.
I understand that in this particular case, transitioning to a SPA (Single Page Application) approach could mitigate these issues. I also considered moving the payment form to an Astro component and reloading the Stripe Elements, but this would still result in a poor experience as it does not preserve entered data.
The only solution I see to continue using Astro without compromising the user experience would be to switch from an integrated Stripe Elements payment form to redirecting to a Stripe-hosted payment page using Stripe Checkout. This would allow the cart to persist and avoid losing form data, although it would involve a significant change to the payment flow.
Conclusion
However, I am concerned that, due to how transitions work behind the scenes, it may only be possible to maintain the state of variables and elements that belong to the website itself. I understand that Astro's transitions use JavaScript to manage the persistence of these elements, but with external iframes, it is evident that they cannot modify the content of third-party iframes. Therefore, transition:persist does not actually keep the element in the DOM the entire time but rather re-renders it while preserving previous values. I'm not sure if this is correct, but I fear there may be no solution for this issue.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/withastro-astro-qzdze4?file=src%2Flayouts%2FLayout.astro
Participation