Inner content resizes immediately - incorrect transform scaling?

[IWMTom]

Minimal reproducible example: https://codesandbox.io/s/hungry-chaum-jmmzi

Press the "change" button to see the issue.

The green "card" text expands to the full width of the end state and the container slowly expands to meet the size. The span element and the content container div are both set to width: 100% but the transform seems to be expanding the content to 2x its expected size which causes it to overflow.

If I set transform: none !important; to the content container div (child of the grid item) then the green box is consistently the same width as its container throughout the animation, but the text is skewed.

Any guidance (especially if I've misunderstood how the library works!) would be great, thanks in advance.

[philipgiuliani]

We are having the same problem.

[russellbart]

I'm seeing a immediate jump similar to this just as the animation starts.

[xwchris]

same problem

[Dominic-Preap]

Any workaround so far?