[BUG] Layout prop children stretching in mobile browsers

[MartinRybergLaude]

1. Read the FAQs 👇

Done.

2. Describe the bug

In the documentation, visual stretching of children of an element with "layout" prop set are expected to stretch unless the direct children bear the layout prop as well. This works as expected in desktop browsers, but in mobile browsers, a stretch, sometimes permanent, still happens under certain conditions.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-5-layout-prop-behavior-eezf8?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open sandbox in mobile browser (chrome and firefox on android tested)
2. Press "search" button

5. Expected behavior

Expecting no stretching of children to occur. When entering the input field and pressing enter on the mobile keyboard, expected behaviour is shown. Only the search button causes issues here.

6. Video or screenshots
Current behavior:

Expected behavior:

7. Environment details

Android 12, Chrome 96 and Firefox 94

[sebqq]

Actually, I get this kind of error a lot even in web browser with v5 when using layout='position'. Also when I use only layout then my components are translated off the screen's viewport making them invisible to the users. Had to remove some layout animations completely as I wasn't able to do anything about it.

[tpict]

I'm seeing something similar with layout="position" in a CSS grid: when a layout change occurs that would increase the height of a min-content row, the existing elements in that row are scaled in the Y-axis inversely proportional to the change in height.

[mattgperry]

Can't reproduce in latest Safari so closing for now.