我在桌面和移动设备上使用Safari时,发现当用户滚动时,使用position:fixed的元素重绘速度非常缓慢。
Safari难以处理position:fixed的元素,这些元素包括.portfolio-item .expanded-content的#intro和页脚元素。滚动时,#intro不一定会重绘到正确的z-index(它应该在用户滚动时位于其他元素后面)。在iOS Safari上,页脚元素在移动设备上不能保持固定位置。在iOS Chrome上滚动很流畅,一切都按预期工作。
我做了一个fiddle,把所有的图片、字体和JS都去掉了,结果发现Safari在滚动时没有问题重绘position:fixed元素。
因为这是一个作品集网站,删除我的图片显然不是一个选项。我真的希望将其变成一个真正的单页面网站,而不是使用AJAX或任何东西来按需加载内容。我是否要求Safari太多了,让它有那么多元素并能够在滚动时重绘position:fixed的元素?Chrome和FF似乎没有问题,IE9、10、11也没有问题。
我不完全确定这是否是重新绘制的问题,但您可以在下面的视频中看到,如果我通过触发一个非滚动事件(如mouseover事件)来强制Safari重新绘制,它会重新绘制,并将该position:fixed元素放置在我在样式表中指定的z-index中。因此,这个事实加上fiddle可以正常工作,这就是为什么我认为这是重新绘制的问题,而不是我的代码问题。
我希望找到一种解决这个问题的方法,而不需要使用更多的JS或动态加载内容,以保持相同的设计(不放弃使用position:fixed或流体布局的想法,只是因为一个浏览器有问题),并尝试保持快速和平滑的性能。我考虑过每次用户滚动时使用JS来强制Safari重新绘制,但我认为这似乎会对所有浏览器的性能产生负面影响。我真的需要其他人的想法和观点。
网站:http://sarahjean.co fiddle:http://jsfiddle.net/sjc8611/n9z3W/ 视频:https://dl.dropboxusercontent.com/u/24724104/position-fixed-repaint-lag-safari.mov HTML代码:
Safari难以处理position:fixed的元素,这些元素包括.portfolio-item .expanded-content的#intro和页脚元素。滚动时,#intro不一定会重绘到正确的z-index(它应该在用户滚动时位于其他元素后面)。在iOS Safari上,页脚元素在移动设备上不能保持固定位置。在iOS Chrome上滚动很流畅,一切都按预期工作。
我做了一个fiddle,把所有的图片、字体和JS都去掉了,结果发现Safari在滚动时没有问题重绘position:fixed元素。
因为这是一个作品集网站,删除我的图片显然不是一个选项。我真的希望将其变成一个真正的单页面网站,而不是使用AJAX或任何东西来按需加载内容。我是否要求Safari太多了,让它有那么多元素并能够在滚动时重绘position:fixed的元素?Chrome和FF似乎没有问题,IE9、10、11也没有问题。
我不完全确定这是否是重新绘制的问题,但您可以在下面的视频中看到,如果我通过触发一个非滚动事件(如mouseover事件)来强制Safari重新绘制,它会重新绘制,并将该position:fixed元素放置在我在样式表中指定的z-index中。因此,这个事实加上fiddle可以正常工作,这就是为什么我认为这是重新绘制的问题,而不是我的代码问题。
我希望找到一种解决这个问题的方法,而不需要使用更多的JS或动态加载内容,以保持相同的设计(不放弃使用position:fixed或流体布局的想法,只是因为一个浏览器有问题),并尝试保持快速和平滑的性能。我考虑过每次用户滚动时使用JS来强制Safari重新绘制,但我认为这似乎会对所有浏览器的性能产生负面影响。我真的需要其他人的想法和观点。
网站:http://sarahjean.co fiddle:http://jsfiddle.net/sjc8611/n9z3W/ 视频:https://dl.dropboxusercontent.com/u/24724104/position-fixed-repaint-lag-safari.mov HTML代码:
<nav data-scroll-header="" id="main-navigation">
<ul>
<li><a href="#work" data-scroll="">Work</a>
</li>
<li><a href="#about" data-scroll="">About</a>
</li>
<li><a href="#services" data-scroll="">Services</a>
</li>
<li><a href="#contact" data-scroll="">Contact</a>
</li>
</ul>
</nav>
<div class="header" id="header">Header Content</div>
<section id="intro" class="container">
<article class="content">
<h1>Introduction Text</h1>
<p>Welcome to my super cool portfolio site. Check out how awesome I am. You should totally hire me.</p>
</article>
</section>
<section id="work" class="container">
<article class="content">
<h1>Work</h1>
<nav id="portfolio-navigation">
<ul>
<li><a href="#work1">See My Work 1</a>
</li>
<li><a href="#work2">See My Work 2</a>
</li>
</ul>
</nav>
</article>
<article id="work1" class="portfolio-item">
<div class="expanded-content">
<h2 class="center">Here is some of my work!</h2>
<p>Lorem ipsum dolor sit amet..</p>
<footer><a href="#work">Close</a>
</footer>
</div>
</article>
<article id="work2" class="portfolio-item">
<div class="expanded-content">
<h2 class="center">More of my cool work!</h2>
<h1>Proin Quis Tortor Orci. Etiam At Risus</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<footer><a href="#work">Close</a>
</footer>
</div>
</article>
</section>
<section id="contact" class="container">
<article class="content">
<h1>Contact</h1>
<ul id="contact-list">
<li>I would include a list of ways to contact me here</li>
<li>Emails</li>
<li>Telephones</li>
<li>The postal services</li>
</ul>
</article>
</section>
<section id="services" class="container">
<article class="content">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
样式表:
body {
background: #fff8ec;
margin: 0 auto;
height: 100%;
}
html {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 135%;
color: #4b3d2f;
height: 100%;
}
h1, h2, h3, h4, h5 {
font-family: Arial, sans-serif;
}
h1 {
color: #aba499;
text-align: center;
font-size: 2em;
}
.portfolio-item h2 {
font-size: 1.8em;
}
a, a:link, a:visited {
color: #c85128;
text-decoration: none;
}
a:hover {
color: #4b3d2f;
}
p {
margin: 1em 0;
line-height: 135%;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
position: relative;
background-color: #e5e2de;
padding: 100px 0;
}
.container > .content {
width: 80%;
margin: 0 auto;
max-width: 800px;
background-color: transparent;
}
#header {
background-color: #c85128;
height: 95%;
position: relative;
z-index: 3;
display: table;
width: 100%;
}
#intro {
background-color: transparent;
position: fixed;
top: 5%;
left: 0px;
height: 25%;
padding: 5% 0;
z-index: 0;
}
#intro > .content {
background-color: #fff8ec;
width: 70%;
padding: 5%;
border-radius: 20px;
box-shadow: 0px 1px 3px #e5e2de;
}
#work {
margin-top: 55%;
background-color: #dedad5;
}
#contact {
background-color: #d8d3cd;
}
#services {
background-color: #d1cbc4;
}
#about {
background-color: #cac4bc;
}
section h1 {
padding: 50px 0;
}
article .expanded-content h2, article .expanded-content p {
margin: 50px auto;
}
#main-navigation {
display: table;
width: 100%;
background-color: #aba499;
position: fixed;
top: 0;
left: 0;
height: 3em;
overflow: visible;
z-index: 2;
}
#main-navigation a {
color: #fff8ec;
font-family:'NovecentowideBookRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: block;
}
#main-navigation a:hover {
color: #4b3d2f;
text-shadow: 0em -0.05em 0em #e5e2de;
}
#main-navigation ul {
display: table-row;
height: 3em;
overflow: visible;
}
#main-navigation ul li {
display: table-cell;
width: 20%;
padding: .8em;
text-align: center;
vertical-align: middle;
}
.portfolio-item {
max-height: 0px;
height: 0px;
overflow: hidden;
position: fixed;
top: 3em;
left: 0%;
-webkit-transition: height 700ms ease;
-moz-transition: height 700ms ease;
-ms-transition: height 700ms ease;
-o-transition: height 700ms ease;
transition: height 700ms ease;
}
#work1:target, #work2:target {
max-height: 1000px;
opacity: 1;
width: 80%;
height: 70%;
padding: 5%;
top: 5%;
left: 5%;
background-color: #fff;
box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
z-index: 10;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#work1:target .expanded-content, #work2:target .expanded-content {
max-width: 900px;
margin: 0 auto;
}
#work1:target .expanded-content footer, #work2:target .expanded-content footer {
display: block;
width: 90%;
text-align: right;
background-color: #c85128;
position: fixed;
top: 5%;
left: 5%;
z-index: 11;
}
#work1:target .expanded-content footer a, #work2:target .expanded-content footer a {
display: block;
padding: 1em;
color: #e5e2de;
height: 1em;
}