如何强制Safari重绘位置：固定滚动的元素？

Question

我在桌面和移动设备上Safari浏览器出现问题，刷新位置的元素非常缓慢：当用户滚动时修复。

带位置的元素：safari固定的元素是#intro和.portfolio-item .expanded-content的页脚元素。滚动中的#intro不一定会重绘为正确的z-index（当用户滚动时，它应该位于其他元素的后面）。移动设备上的页脚元素不会停留在iOS Safari上的滚动内容上方的固定位置。在Safari Safari上滚动很麻烦（但是，iOS chrome是流畅的，一切都按预期工作）。

我做了一个小提琴，我把所有的图像，字体和JS都去掉了，瞧，Safari浏览器在重画位置方面没有任何问题：滚动上的固定元素。

由于这是一个投资组合网站，剥离我的图像显然不是一种选择。我真的希望能够成为一个真正的单页网站，而不是使用AJAX或其他任何东西来按需加载内容。我是否要求太多的Safari浏览器有这么多元素，并且能够重新绘制位置的元素：固定在滚动条上？ Chrome和FF似乎没有问题;我也不完全确定这是一个重新绘制的问题，但是你可以在下面的视频中看到，如果我通过触发不滚动的事件来强制Safari重绘，如鼠标悬停事件，它重新绘制并放置该位置：在我的样式表中指定的z-index中的固定元素。所以这个事实，加上小提琴工作得很好，这就是为什么我假设它是一个重绘问题，而不是我的代码问题。

我希望找出一种方法来解决这个问题，而不诉诸更多的JS或动态加载的内容，以保持相同的设计（不放弃使用位置的想法：固定或流体布局，只是因为一个浏览器遇到问题），并努力保持性能的快速和平稳。每次用户滚动浏览器强制Safari重绘时，我都会考虑使用JS，但在我看来，这会对所有浏览器的性能产生负面影响。我真的可以使用一些其他人的想法和观点。

网站：http://sarahjean.co

小提琴：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> 

的CSS：

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; 
} 

Answer 1

你并不疯狂。我与position: fixed元素没有重新绘画。尚未找到解决方案。

编辑找到了解决办法。你可以通过触发CSS动画来重绘任何东西，从而使其大小不一。下面是我使用的代码片段：

.foo 
    position: fixed 
    &.active 
    animation: repaint 1ms 

@keyframes repaint 
    from 
    width: 99.999% 
    to 
    width: 100% 

Answer 2

如果你不知道手写笔的风格是什么，因此不能在这里使用@CorySimmons的解决方案是上面的代码的CSS版本。此外，我不得不改变一些值，明显高于那些值不在iOS的8

@-webkit-keyframes repaint { 

    from { 
     width: 99.9%; 
    } 
    to { 
     width: 100%; 
    } 

} 

@-moz-keyframes repaint { 

    from { 
     width: 99.9%; 
    } 
    to { 
     width: 100%; 
    } 

} 

@keyframes repaint { 

    from { 
     width: 99.9%; 
    } 
    to { 
     width: 100%; 
    } 

} 

.repaint { 
    -webkit-animation: repaint 100ms; 
     -moz-animation: repaint 100ms; 
     -ms-animation: repaint 100ms; 
      animation: repaint 100ms; 
} 

所有你需要做的是给固定元素的类.repaint时需要重新绘制它的工作。在我的情况下，这是一个粘性的导航，使用jQuery的scrollTop（）来添加和删除我的标头广告中的类，所以在需要时，jquery功能还为我的标头添加了.repaint类，它为我解决了问题。

Answer 3

我遇到了完全相同的问题Safari 9.1。

在大多数情况下，延长动画执行的时间对我来说都有效。

@keyframes repaint { 
    from { 
    width: 99.999% 
    } 
    to { 
    width: 100% 
    } 
} 

.repaint { 
    animation: repaint 5000ms; 
} 

但是，如果固定位置的DOM元素是高度变化（时动态添加新的DOM元素如父高度可以改变）父里面，那么它没有为我延长动画，即使工作，时间不合理的价值。

我最终的解决办法是删除animation黑客和在Force DOM redraw/refresh on Chrome/Mac

我用AngularJS建议强制重绘JS与

$('.repaint').hide().show(0); 

，并有这个技巧在所有的情况下，我有工作在每个摘要循环上调用.hide().show(0)。

哈克在AngularJS指令的形式：

function ForceRepaintDirective() { 
    return { 
    restrict: 'EA', 
    link: function(scope, $element) { 
     scope.$watch(function() { 
     $element.hide().show(0); 
     }); 
    } 
    }; 
};