Framer Motion: анимация заставляет веб-сайт расширяться ⇐ CSS

[Anonymous]

Я заметил очень странное поведение с размером веб-сайта.

• На мобильных устройствах веб-сайт выглядит больше, чем его содержимое (а также его HTML-элементы и элементы тела). )
• Переполнения не происходит (или, по крайней мере, я его не обнаружил)
• Когда я навожу указатель мыши на расширение React Developer Tools, оно исправляется, и веб-сайт теперь имеет правильный размер (размер экрана)

Ссылки:
Ссылка на запись экрана
Ссылка на репозиторий GitHub — не стесняйтесь ее форкнуть
Я развернул сайт на GitHub Pages - ошибка не исчезла.
Ссылка на сайт GitHub Pages
Ошибка появится только в том случае, если:

• Вы не изменяете размер страницы до размера мобильного устройства. Вам необходимо загрузить его в мобильном размере.
• Вы используете настоящее мобильное устройство или эмулятор мобильного устройства в браузере. Без этого она не появится.

Обратите внимание, что все станет довольно большим и негабаритным после изменения размера и обновления страницы два-три раза с помощью «адаптивного» «параметр устройства в эмуляторе мобильного устройства. Но увеличение размера не меняет размер элементов, они по-прежнему имеют размер, идеально вписывающийся в окно. Это просто каким-то образом увеличено.


После закрытия эмулятора мобильного устройства все снова станет нормальным.
Возможно, проблема с масштабом — это совершенно другая проблема. (это не исправляется при наведении курсора на React Devtools)
Может быть, вы заподозрите эти тени от фоновых кругов, но я попробовал их закомментировать — ничего не изменилось.
Эта ошибка появляется в Chrome (Chrome для Windows: версия 92.0.4515.159 / Mobile: та же версия) и MS Edge (версия 92.0.902.78). Я не тестировал другие браузеры.
Помимо React, я использую Tailwind CSS, React-Router и Framer-motion.

Подробнее здесь: https://stackoverflow.com/questions/689 ... -to-expand