title: Skrollr relative top-bottom fires early in chrome
body: <p>I have several relative positioned divs stacked on top of eachother with a height of 100% set with jQuery on load.
  Inside each relative positioned div is a fixed div that holds the content.</p>
  
  <p>As you scroll down the page I am using skrollr to animate the fixed divs top -100%.
  My markup for skrollr is like this <code>data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;"</code> so when the parent slide is at the top of the viewport it is position top and when the bottom of the parent slide is at the top of the viewport it is top -100%. Right?</p>
  
  <p>The second fixed position div is abit longer than the screen height so instead of making it top -100% it becomes position relative when the parent is at the top of the viewport. <code>data-100-top="position:fixed;" data-top='position:relative;'</code></p>
  
  <p>The third div follows the same logic as the first one <code>data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;"</code></p>
  
  <p>This all works fine in Firefox and IE but in Chrome and Safari the 3rd div starts animating too early. The fixed content is already half off the screen by the time the parent div is at the top, which confuses me because the data-top attribute is set to top:0;</p>
  
  <p>Here is the example - <a href="http://dev.touch-akl.com/standout/" rel="nofollow">http://dev.touch-akl.com/standout/</a></p>
  
  <p>Link to Skrollr - <a href="https://github.com/Prinzhorn/skrollr" rel="nofollow">https://github.com/Prinzhorn/skrollr</a></p>
  
  <p>HTML Example</p>
  
  <pre><code>&lt;section id="home" class="page"&gt;
      &lt;div class="slide" data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;"&gt;
          &lt;section class="content"&gt;
               CONTENT GOES HERE
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="about" class="page"&gt;
      &lt;div class="slide" data-anchor-target="#about" data-100-top="position:fixed;" data-top='position:relative;'&gt;
          &lt;section class="content"&gt;
               CONTENT GOES HERE - THIS IS THE ONE THAT IS HIGHER THAN THE OTHERS
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="exhibitions" class="page"&gt;
      &lt;div class="slide" data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;"&gt;
          &lt;section class="content"&gt;
               CONTENT GOES HERE - THIS IS THE ONE THAT TRIGGERS EARLY
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="events" class="page"&gt;
      &lt;div class="slide" data-anchor-target="#events" data-top="top:0%;"data-top-bottom="top:-100%;"&gt;
          &lt;section class="content"&gt;
               CONTENT GOES HERE
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>