[BUG] Layout animation shift when vertical scrollbar... | motiondivision/motion

Nobody has claimed this yet.

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:

Click on the circle
New element gets rendered and the viewport expands to more than 100vh height
Scrollbar appears
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

My project framer-motion version is 6.5.1, but I tried with the latest version and the issue persists.
Happens on all browsers - chromium, ff, safari

Start with the linked CodeSandbox reproduction and follow the reported sequence: render a new card until the vertical scrollbar appears, then observe the layout-animated checkbox. Trace how the layout animation responds to the body width change; done means scrollbar appearance no longer causes unwanted checkbox repositioning animations while normal layout animation remains intact.

Written by the indexing model from the issue text.

[BUG] Layout animation shift when vertical scrollbar appears

Description

Contributor guide

First steps

Research direction

Assessment