You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If we use AnimatePresence inside a shadow DOM, the popLayout features don't work. This is because we're unable to find the temporary styles added, because shadow dom won't apply styles found in document.head.
Click the example to run the animation. You'll notice the popLayout behavior is not occurring.
Uncomment line 86, skipping the shadow DOM.
popLayout starts working again.
Technical guess of the problem
From what I understand, popLayout works by applying a temporary class which positions an element as absolute during exit transition. This does not work in shadow DOMs due to the way the style is applied. I thinkthe code here is adding the temporary class, but it's hardcoded to using document.head, which won't be available to the shadow dom.
The text was updated successfully, but these errors were encountered:
Description
If we use AnimatePresence inside a shadow DOM, the popLayout features don't work. This is because we're unable to find the temporary styles added, because shadow dom won't apply styles found in document.head.
Code sandbox repro: https://codesandbox.io/p/sandbox/framer-motion-shadow-dom-f7gkk6?file=%2Fsrc%2FApp.js%3A89%2C2
4. Steps to reproduce
Steps to reproduce the behavior:
Technical guess of the problem
From what I understand, popLayout works by applying a temporary class which positions an element as absolute during exit transition. This does not work in shadow DOMs due to the way the style is applied. I think the code here is adding the temporary class, but it's hardcoded to using
document.head
, which won't be available to the shadow dom.The text was updated successfully, but these errors were encountered: