Motion: [BUG] AnimatePresence height animation with padding doesn't work

[snowl]

1. Read the FAQs 👇

2. Describe the bug

When using AnimatePresence with some padding in the div that you are animating w/ height animation, the height calculation breaks and only animates the height to the (internal height - padding), both in and out.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-animatepresence-padding-issue-zqxrk?fontsize=14

If you remove the padding: within the div css, you can see how much more smooth the animation is.

4. Steps to reproduce

Animate height on a div that has padding.

5. Expected behavior

Height should go from 0 to the height calculated by the browser for "auto".

6. Video or screenshots

Here's a gif of how it looks in my application: https://gfycat.com/weirdachingdogwoodclubgall

You can see the div underneath "snaps" because of all the height that still exists due to the padding.

7. Environment details

Tested in chrome

[thebuilder]

I don't think this a framer motion bug. You'd see this regardless of how you are animating height.
It's how the browsers deal with padding when height is 0.

[snowl]

I don't think so - if you slow down the transitions down so you can observe the values they end up animating from "auto" to the total padding height instead of animating from "auto" to 0. Also - even if you try and set the animation to:

<motion.div
                key={item}
                animate={{ height: "auto", opacity: 1, paddingTop: 30, paddingBottom: 30 }}
                exit={{ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }}
                initial={{ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }}
              >

Not only does it exhibit the same behavior, but it also now "snaps" in when animating in as well. I'm fairly sure that this should be animating smoothly here.

[rijk]

I have noticed this behaviour as well when testing with height: 'auto'. I also think it’s a Framer Motion measuring bug.

[vavra7]

Any updates on this? The problem is still present.