motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.66k stars 843 forks source link

[BUG]Blurriness that occurs upon the completion of animation #2816

Closed axuj closed 1 month ago

axuj commented 1 month ago

1. Read the FAQs 👇

2. Describe the bug

2811 Currently, there is blurriness that occurs upon animation completion in Chrome and Edge browsers..

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/devbox/dgs6kk?file=%2Fsrc%2FApp.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

  1. drag button
  2. set willChange='auto'

5. Expected behavior

A clear and concise description of what you expected to happen.

6. Video or screenshots

image 7. Environment details

edge 129.0.2792.65
chrome 129.0.6668.60

AnYiEE commented 1 month ago

It will also cause the background of the child element with backdrop-filter: blur added to not blur properly. You can check this comment. Similarly, the problem disappears after setting will-change to auto (that is, using version 11.5.6 and earlier).

mraballard commented 1 month ago

fyi