Framer Motion：动画导致网站扩展答案

【问题标题】：Framer Motion: Animation causes website to expandFramer Motion：动画导致网站扩展
【发布时间】：2021-08-25 07:22:17
【问题描述】：

我在网站大小方面遇到了非常奇怪的行为。

在移动设备上，网站看起来比其内容（及其 html 和 body 元素）更大
没有发生溢出（或者至少我没有发现）
当我将鼠标悬停在 React Developer Tools 扩展上时，它会自行更正，并且网站现在具有正确的大小（即屏幕大小）

链接：

A link to a screen recording

A link to the GitHub repository - feel free to fork it

我已将该站点部署到 GitHub Pages - 错误并没有消失。

A link to the GitHub Pages site

只有在以下情况下才会出现该错误：

您没有将页面大小调整为移动设备大小。您必须以移动设备大小加载它。
您使用的是真正的移动设备或浏览器的移动设备模拟器。没有它就不会出现。

请注意，使用移动设备模拟器中的“响应式”设备选项调整和刷新页面两到三次后，所有内容都会变得非常大和超大。但是超大尺寸不会改变元素的大小，它们的大小仍然可以完美地适合窗口。它只是以某种方式放大了。

移动设备模拟器关闭后一切都会恢复正常。

也许这个规模问题是一个完全不同的问题。（将鼠标悬停在 React Devtools 上不会得到纠正）

也许你会怀疑这些背景圆形阴影，但我已经尝试将它们注释掉 - 没有任何改变。

此错误出现在 Chrome（Windows 版 Chrome：92.0.4515.159 版/移动版：相同版本）和 MS Edge（92.0.902.78 版）上。我没有测试过其他浏览器。

除了 React，我还在使用 Tailwind CSS、react-router 和 framer-motion。

【问题讨论】：

标签： html css reactjs framer-motion

【解决方案1】：

这个问题是由 Framer-Motion 引起的。 Home 组件使用以下变体进行动画处理：

const homeVariants = {
    initial: {
      x: "110vw",
      opacity: 0.5,
    },
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        duration: 1,
        ease: "easeOut",
      },
    },
    exit: {
      x: "-110vw",
      opacity: 0.5,
      transition: {
        duration: 1,
        ease: "easeIn",
      },
    },
  };

因此，当它最初从右侧滑入时，会导致网站扩展。我已将overflow-x: hidden; 添加到body，但这还不够，正如here. 所解释的那样

为了解决这个问题，我在body 标签上的html 和body 和position: relative; 添加了overflow-x: hidden;。

html,
body {
  background: #130f40;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  position: relative;
}

【讨论】：

【解决方案2】：

<meta name="viewport" content="width=device-width, initial-scale=1">

试试这个

You can visit this link for more description

【讨论】：

此元标记已包含在头部中。