title: Framer Motion: Animation causes website to expand
body: <p>I've experienced very strange behavior with the website size.</p>
  <ul>
  <li>On mobile, the website appears bigger than its content (and its html &amp; body elements)</li>
  <li>There is no overflow happening (or at least I found none)</li>
  <li>When I hover with my mouse over the React Developer Tools extension, it corrects itself and the website has now the correct size (which is the size of the screen)</li>
  </ul>
  <h3>Links:</h3>
  <p><a href="https://1drv.ms/v/s!AvM0afjYPm2LgapHPiZJhs9-ztQCXw?e=FbhreJ" rel="nofollow noreferrer">A link to a screen recording</a></p>
  <p><a href="https://github.com/Julian-Sz/Ice-Cream-Shop" rel="nofollow noreferrer">A link to the GitHub repository - feel free to fork it</a></p>
  <h5>I've deployed the site to GitHub Pages - the bug didn't get away.</h5>
  <p><a href="https://julian-sz.github.io/Ice-Cream-Shop/#/" rel="nofollow noreferrer">A link to the GitHub Pages site</a></p>
  <h2>The bug will only appear when:</h2>
  <ul>
  <li>You don't resize the page to mobile size. You have to load it in mobile size.</li>
  <li>You use a real mobile device or the mobile device emulator of the browser. It won't appear without that.</li>
  </ul>
  <p>Note that everything will get pretty big and oversized after resizing and refreshing the page two to three times with the &quot;responsive&quot; device option in the mobile device emulator. But the oversizing doesn't change the size of the elements, they are still sized to fit perfectly in the window. It's just somehow scaled up.</p>
  <p><a href="https://i.stack.imgur.com/CjOB5l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CjOB5l.png" alt="This is what this looks like..." /></a></p>
  <p>Everything will then turn normal again after the mobile device emulator gets closed.</p>
  <p>Maybe this scale issue is a completely different problem. (it doesn't get corrected by hovering over the React Devtools)</p>
  <p>Maybe you will suspect these background circle shadows, but I've tried commenting them out - nothing changed.</p>
  <p>This bug appears on Chrome (Chrome for Windows: version 92.0.4515.159 / Mobile: same version) and MS Edge (version 92.0.902.78). I haven't tested other browsers.</p>
  <p>Apart from React, I am using Tailwind CSS, react-router, and framer-motion.</p>