Framer Motion：动画使网站扩展

Question

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

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

链接：

A link to a screen recording

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

我已经将站点部署到 GitHub 页面 - 错误并没有消失。

A link to the GitHub Pages site

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

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

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

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

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

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

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

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

Answer 1

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

试试这个

You can visit this link for more description

Answer 2

此问题是由 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;
}

Framer Motion：动画使网站扩展

Framer Motion: Animation causes website to expand

html

css

reactjs

framer-motion

链接：

我已经将站点部署到 GitHub 页面 - 错误并没有消失。

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