Skip to content
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

[BUG] AnimatePresence mode="popLayout" assumes LTR, works differently/unexpectedly in RTL #2952

Open
benface opened this issue Dec 19, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@benface
Copy link

benface commented Dec 19, 2024

1. Read the FAQs πŸ‘‡

βœ…

2. Describe the bug

There is code in AnimatePresence's mode="popLayout" behavior that assumes the current text direction is LTR, because it sets the left property instead of inset-inline-start.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/x4hf8j

4. Steps to reproduce

  1. Click on "Toggle Second Column" a few times to see the enter animation of the second column. Notice the container expands and the column fades in, but it doesn't move.
  2. Click on "Toggle Direction" to set the direction to RTL.
  3. Click on "Toggle Second Column" a few times to see the enter animation of the second column in RTL direction. Notice the second column now moves from right to left as it fades in.

5. Expected behavior

The second column should not move as it fades in in RTL direction.

6. Video or screenshots

CleanShot.2024-12-19.at.14.30.20.mp4

7. Environment details

Chrome 131.0.6778.205 on macOS.

@benface benface added the bug Something isn't working label Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant