背景附件破坏了移动设备上的站点

Question

我的理解是背景附件在移动设备上不起作用。这导致我的页面跳来跳去，滚动时出现空白。

什么在桌面上有效： 反应代码：

const Home = () => {

    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => {
        setIsOpen(!isOpen);
    }

    return (
        <div className="App" >
            <div className="Body">
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <HeroSection/>
            //...all my sections
            <Footer/></div>
        </div>
    )
}

export default Home

CSS：

.App {
  text-align: center;
  background: url(./images/site-background.jpeg) no-repeat center center;;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  background-position:center;
  overflow: hidden;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  top: 0;
  left: 0;
  right: 0;


  background-attachment: fixed;
  
}

.body{
  //just a div
}

我已经尝试了这里的解决方案，它修复了背景但阻止了我的应用程序滚动。内容截断：

.App {
  text-align: center;
    background: url(./images/site-background.jpeg) no-repeat center center;;
    background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: -1;
      -webkit-transform: translateZ(0);
      pointer-events: none;
  
}

.body{
overflow: scroll;
}