title: How to force Safari to repaint position:fixed elements on scroll?
body: <p>I am having issues with Safari on desktop and mobile devices being very slow to repaint elements with position:fixed when the user scrolls. </p>
  
  <p>The elements with position:fixed that safari is having difficulty with are the #intro, and the footer elements of .portfolio-item .expanded-content. The #intro on scroll doesn't necessarily repaint to the correct z-index (it is supposed to be behind other elements as the user scrolls). The footer elements on mobile don't stay in a fixed position above the content on scroll on iOS safari. Scrolling on iOS safari is jaggy (iOS chrome, however, is fluid and everything is working as expected).</p>
  
  <p>I did a fiddle where I stripped out all the images, fonts, and JS, and lo and behold, safari has no trouble with repainting position:fixed elements on scroll.</p>
  
  <p>Since this is a portfolio site, stripping out my images is obviously not an option. I was really hoping to make this a true one-page site, and not use AJAX or anything to load content on demand. Am I asking too much of safari to have that many elements and be able to repaint the elements with position:fixed on scroll? Chrome and FF don't seem to have a problem with it; neither do IE9, 10, 11.</p>
  
  <p>I am not completely certain it's a repainting issue, but you can see in the video below that if I am forcing Safari to repaint by triggering an event that is not scroll, like a mouseover event, it repaints, and puts that position:fixed element in the z-index I specified in my stylesheet. So that fact, combined with the fiddle working just fine, is why I'm assuming it's a repainting issue, and not an issue with my code.</p>
  
  <p>I'm hoping to figure out a way to fix this issue without resorting to more JS or dynamically loaded content, to maintain the same design (not abandon the idea of using position:fixed or a fluid layout just because one browser is having issues with it) and to try to keep performance quick and smooth. I thought about using JS each time the user scrolled to force safari to repaint, but that seems to me like it would negatively impact performance in all browsers. I could really use some other people's thoughts and perspectives on this.</p>
  
  <p>the site: <a href="http://sarahjean.co">http://sarahjean.co</a></p>
  
  <p>the fiddle: <a href="http://jsfiddle.net/sjc8611/n9z3W/">http://jsfiddle.net/sjc8611/n9z3W/</a></p>
  
  <p>the video: <a href="https://dl.dropboxusercontent.com/u/24724104/position-fixed-repaint-lag-safari.mov">https://dl.dropboxusercontent.com/u/24724104/position-fixed-repaint-lag-safari.mov</a></p>
  
  <p>The html:</p>
  
  <pre><code>    &lt;nav data-scroll-header="" id="main-navigation"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#work" data-scroll=""&gt;Work&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#about" data-scroll=""&gt;About&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#services" data-scroll=""&gt;Services&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact" data-scroll=""&gt;Contact&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="header" id="header"&gt;Header Content&lt;/div&gt;
  &lt;section id="intro" class="container"&gt;
      &lt;article class="content"&gt;
              &lt;h1&gt;Introduction Text&lt;/h1&gt;
  
          &lt;p&gt;Welcome to my super cool portfolio site. Check out how awesome I am. You should totally hire me.&lt;/p&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  &lt;section id="work" class="container"&gt;
      &lt;article class="content"&gt;
              &lt;h1&gt;Work&lt;/h1&gt;
  
          &lt;nav id="portfolio-navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#work1"&gt;See My Work 1&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#work2"&gt;See My Work 2&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/article&gt;
      &lt;article id="work1" class="portfolio-item"&gt;
          &lt;div class="expanded-content"&gt;
                  &lt;h2 class="center"&gt;Here is some of my work!&lt;/h2&gt;
  
              &lt;p&gt;Lorem ipsum dolor sit amet..&lt;/p&gt;
              &lt;footer&gt;&lt;a href="#work"&gt;Close&lt;/a&gt;
  
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/article&gt;
      &lt;article id="work2" class="portfolio-item"&gt;
          &lt;div class="expanded-content"&gt;
                  &lt;h2 class="center"&gt;More of my cool work!&lt;/h2&gt;
  
                  &lt;h1&gt;Proin Quis Tortor Orci. Etiam At Risus&lt;/h1&gt;
  
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit..&lt;/p&gt;
              &lt;footer&gt;&lt;a href="#work"&gt;Close&lt;/a&gt;
  
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  &lt;section id="contact" class="container"&gt;
      &lt;article class="content"&gt;
              &lt;h1&gt;Contact&lt;/h1&gt;
  
          &lt;ul id="contact-list"&gt;
              &lt;li&gt;I would include a list of ways to contact me here&lt;/li&gt;
              &lt;li&gt;Emails&lt;/li&gt;
              &lt;li&gt;Telephones&lt;/li&gt;
              &lt;li&gt;The postal services&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  &lt;section id="services" class="container"&gt;
      &lt;article class="content"&gt;
           &lt;h1&gt;Services&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet..&lt;/p&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>the CSS:</p>
  
  <pre><code>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 &gt; .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 &gt; .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;
  }
  </code></pre>