我将div设置为100％宽度的页面，在safari大浏览器中工作正常，但是当我在移动safari中预览网站时，div左右滑动，甚至在向左滑动时页面下降。固定导航栏还显示移动野生动物园中滚动的主要抖动？
/*navlist*/
.navigation {
width: 100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: grey;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float: right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: 55px;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
border-top: 0.5px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size: .8em;
letter-spacing: 0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
/*----/----Nav Bar*/
/*in*/
.in {
float: left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size: .8em;
letter-spacing: 0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size: .8em;
letter-spacing: 0.05em;
}
/*----/----logo*/
/*Panels*/
.projects-container {
width: 100%;
height: auto;
overflow: auto;
text-align: center;
margin: 0;
box-sizing: border-box;
display: inline-block;
-webkit-animation: fadein 3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s;
/* Firefox < 16 */
-ms-animation: fadein 3s;
/* Internet Explorer */
-o-animation: fadein 3s;
/* Opera < 12.1 */
animation: fadein 3s;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
}
.projects {
height: 200px;
width: 100%;
background-size: cover;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
text-align: center;
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
list-style: none;
text-decoration: none;
}
.projects:hover {
text-align: center;
cursor: pointer;
background: #DEDDDD;
opacity: .4;
color: #545454;
}
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0, 0, 0, .2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
/*----/----Panels*/
/****landscape****/
@media only screen and (max-width: 555px) {
.nav li {
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z" />
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z" />
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z" />
</g>
</svg>
</a>
<a href="" class="logo logocolorchng" style="display: inline-block;">Logo </a>
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a>
</li>
<li class="navlist"><a href="#panel2" style="display: inline-block; width:100%;">Work</a>
</li>
<li class="navlist"><a href="#wrapper" style="display: inline-block; width:100%;">Contact</a>
</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero"></div>
<div id="scroll">
<a href="#panel2">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns= "http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>
</span>
</a>
</div>
</div>
<div class="projects-container" id="panel2">
<div class="projects" style="">
<span class="project 1">Work Title 1</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 2</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 3</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 4</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 5</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 6</span>
</div>
</div>