search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.41k stars 740 forks source link

[BUG] Layout animation shift when vertical scrollbar appears #2246

Open karamanliev opened 10 months ago

karamanliev commented 10 months ago

1. Read the FAQs 👇

2. Describe the bug

I'm working on an UI, which is kind of a flow, which consists of cards with inputs in them, that render new cards, depending on the input. One of the input types is a <RoundedCheckbox />, which is using a parent <motion.div layout> for the positioning and width of the checkbox container and a child <motion.div layout> for the positioning of the label after the checkbox icon appears.

The problem comes when enough cards are rendered on the screen and the viewport gets above 100vh and the vertical scrollbar appears (<body> tag's computed width gets narrower) and because of that the animated checkboxes start animation to their new positioning, which looks bad.

I'm not 100% sure if this is a bug or a feature, but I can't find a way to deal with it. What is weird, is that if I manually add a overflow-y: scroll or height: 200vh to the body, this effect doesn't happen. I'm going to attach videos.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

CodeSandbox link

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Click on the circle
  2. New element gets rendered and the viewport expands to more than 100vh height
  3. Scrollbar appears
  4. Circle repositioning is animated

5. Expected behavior

In my opinion if framer-motion is used for UI elements like inputs and buttons a scrollbar shouldn't trigger position animations.

6. Video or screenshots

Here is a simplified example of my UI. You can clearly see how the top card doesn't have the problem, because the radios don't have layout animation. The second video shows that this doesn't happen if I manually add height or overflow-y to the body.

https://github.com/framer/motion/assets/22788016/262b9f7c-d4e2-45fd-ba64-9f61dadb7d65

https://github.com/framer/motion/assets/22788016/a3c1e1d2-0ee7-474f-ba8e-0a1dede49955

7. Environment details

michael-nelms commented 2 weeks ago

Similar issue here and I can't figure out a fix