title: Absolute Positioned Floating Header Jitters in Safari
body: <p>I have a simple JSFiddle of a single floating header here:</p>
  
  <p><a href="http://jsfiddle.net/zT9KQ/" rel="nofollow noreferrer">http://jsfiddle.net/zT9KQ/</a></p>
  
  <p>Basically, this uses <code>translate3d</code> to kick in the GPU and hardware accelerate the floating header so that it may be drawn more smoothly. The header jitters in the latest Safari but gets drawn perfectly fine in the latest Chrome, FF and Opera. The actual code that is being affected by this (the code that spurred this question) is code I've written that cannot be shared publicly but works in a similar manner where <code>fixed</code> positioning is, unfortunately, not a valid solution.</p>
  
  <p>I have tried:</p>
  
  <ol>
  <li>Setting the <code>backface-visibility</code> CSS property to <code>none</code>.</li>
  <li>Setting the <code>perspective</code> CSS property to <code>1000</code>.</li>
  <li>Playing with <code>requestAnimationFrame</code> during the animation logic.</li>
  <li>Throttling the scroll event callback.</li>
  <li>Setting the <code>translateZ</code> transform to something higher than <code>0px</code>.</li>
  </ol>
  
  <p>But none of this has worked (or at least - it seems reasonable to assume the GPU has kicked in but the jittering persists). I noticed that two questions are already open that are identical this one I'm raising but no one has answered them:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/23546270/jitter-in-sticky-header-in-safari">Jitter in Sticky Header in Safari</a></li>
  <li><a href="https://stackoverflow.com/questions/16546411/implementing-fixed-position-in-javascript-causes-jitter-in-safari-when-scrolling">Implementing fixed position in javascript causes jitter in Safari when scrolling</a></li>
  </ul>
  
  <p>Is this a known bug? Is there a performance hole I'm not sealing up?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have been receiving a lot of questions as to why <code>position: fixed</code> is not a valid option. To directly reply to Antony's comment on the question itself:</p>
  
  <p>I'm not emulating/reinventing <code>position: fixed</code>. If you look at the top-voted answer (as of this comment), you will see that this seems to be a Safari issue. The reason <code>position: fixed</code> is undesirable in this case is because the code in question must be able to support multiple floating headers that sit below each other and have a "container" range where there may be infinitely nested containers. Using fixed positioning not only makes the code more complicated in the case where these floating headers live in a container that horizontally scrolls but also makes the component more brittle overall (calculating offsets when the widget needs to sit within another container somewhere else on the page). So, semantically, <code>absolute</code> positioning fits my needs better than <code>fixed</code>.</p>
  
  <p><strong>SECOND EDIT</strong></p>
  
  <p>Upon thinking about what Antony had been telling me (that I may be reinventing the wheel), and after hearing about <code>-wekbit-sticky</code> from user3716477, I would like to update the question to show what I'm trying to do. You can see how my code behaves in every browser other than Safari here:</p>
  
  <p><a href="http://cl.ly/3y1i3C473G2G" rel="nofollow noreferrer">http://cl.ly/3y1i3C473G2G</a></p>
  
  <p>I have learned:</p>
  
  <ol>
  <li>You cannot rely on the <code>scroll</code> or really any scroll-like events (such as <code>mousewheel</code>) since they are asynchronous in nature. I submitted a bug to Apple detailing what was happening and they closed the bug for this reason.</li>
  <li>There is no real way to do what I want as of now - to have multiple floating headers that stack and replace each other. I guess I'll have to wait for something like <a href="http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" rel="nofollow noreferrer"><code>-webkit-sticky</code></a> to come out.</li>
  <li>I should include <em>all</em> relevant information in SO questions from here on out. :-P</li>
  </ol>
  
  <p>Thanks for playing guys! Here's the exact response I received from Apple:</p>
  
  <blockquote>
    <p>Apple Developer Relations09-Jun-2014 01:16 PM</p>
    
    <p>Engineering has determined that there are no plans to address this
    based on the following:</p>
    
    <p>Code is using scroll events, which are asynchronous.</p>
    
    <p>We are now closing this bug report.</p>
    
    <p>If you have questions regarding the resolution of this issue, please
    update your bug report with that information.</p>
    
    <p>Please be sure to regularly check new Apple releases for any updates
    that might affect this issue.</p>
  </blockquote>