title: google chrome issue with fixed position and margin-top
body: <p>Funky problem in Chrome:</p>
  
  <p>I have this social-icons <code>div</code> in the layout of my rails app:</p>
  
  <pre><code>&lt;div class="social_media_icons"&gt;
    &lt;ul&gt;
      &lt;li &gt;&lt;a href="http://www.youtube.com/" target="_blank"&gt;&lt;img src="/images/yt.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="http://www.facebook.com/" target="_blank"&gt;&lt;img src="/images/fb.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="https://twitter.com" target="_blank"&gt;&lt;img src="/images/tw.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And relevent css:</p>
  
  <pre><code>.social_media_icons{
      float: left;
      position: fixed;
      margin-top: -69%;
  }
  </code></pre>
  
  <p>That I am moving around the screen with <code>@media</code> queries. Now the <code>@media</code> works fine for width but not so good for height. So when the content changes and the height of page gets larger or smaller I have a javascript function that changes the margin-top of the <code>div</code>:</p>
  
  <pre><code>$(document).ready(function(){
    if(document.documentElement.clientWidth &gt;= 1101){
        if($(".container").height() &gt; 600 &amp;&amp; $(".container").height() &lt; 1299){
            $(".social_media_icons").css("margin-top", "-115%"); //problem right here
        } else if($(".container").height() &gt; 1300){
            $(".social_media_icons").css("margin-top", "-273%"); //problem right here
        } else if($(".container").height() &lt;= 500){
            $(".social_media_icons").css("margin-top", "-45%");
        } else{
            $(".social_media_icons").css("margin-top", "-68%");
        }
    }
  });
  </code></pre>
  
  <p>As you can see the values for the <code>margin-top</code>, on the commented lines, (<code>-115%</code> and <code>-273%</code> respectively) are a little messed up! And of course those values don't work at all in FF or IE. </p>
  
  <p><strong>Question:</strong> Why is Chrome requiring such absurd values for the % of <code>margin-top</code> when the content on the page gets any larger then <code>600px</code>? </p>
  
  <p>In fact why am I having to change the % of <code>margin-top</code> at all? Shouldn't it be relative to the view window on a <code>fixed</code> element? Which would mean that setting the value of <code>margin-top</code> once, should position it in the exact same place no matter the content because the <code>view-port</code> height never changes.</p>