为什么 Safari 视口不能溢出？答案

【问题标题】：Why is Safari viewport can't be overflowed?为什么 Safari 视口不能溢出？
【发布时间】：2020-06-25 18:53:40
【问题描述】：

所以我有这个关于我的网站，https://linar.netlify.app/，页脚页面是可访问的，可以在 chrome 中单击。但是，在 Safari 中，用户可以滚动到页脚，但屏幕会以某种方式弹回主屏幕，使其无法访问和单击。有人知道是什么问题吗？

这是我的这个 react 项目的 index.css：

@font-face {
  font-family: ubuntu;
  src: url(../fonts/Ubuntu-Regular.ttf);
}

body {
  position: absolute;
  font-family: ubuntu;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 200px !important;
  -webkit-overflow-scrolling: auto !important;
  -webkit-background-size: auto;
  background-size: auto;
}

* {    
  margin: 0;
}

这里是 app.css：

Nav {
   position: fixed;
   top: 30%;
   right: 0;
   z-index: 1;
}

footer {
   -webkit-transform:translate3d(0,0,0);
   transform: translate3d(0, 0, 0);
   height: 200px;
   font-size: 12px;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: black;
   color: white;
   z-index: -3;
}

.footer-wrapper{
   display: table;
}

.footer-content{
   display: table-row;
   text-align: center;
}

.footer-icons{
   color: rgb(500, 500, 500, 0.5);
   height: 32px;
   width: 32px;
   margin: 8px;
   margin-bottom: 32px;
   margin-top: 32px;
}

.footer-icons:hover{
   color: white;
}

.main{
   background-color: white;
   position: relative;
   z-index: 0;
   height: 100vh;
   width: 100vw;
   -webkit-overflow-scrolling: auto !important;
}

.preloader{
   width: 100vw;
   height: 100vh;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
 }

【问题讨论】：

标签： css reactjs safari

【解决方案1】：

无需将body设置为position: absolute; 删除该行，它将开始工作。

如果您将行 overflow-x: hidden; 添加到正文中，您将摆脱丑陋的滚动条，只有使用普通鼠标（而不是触摸板或魔法鼠标）

【讨论】：