div not centered vertically on mobile
<p>Thanks in advance to anyone who can help. I have a div containing an animation, that containing div is centered vertically to the page using simple JS. It works perfectly on desktops, but for some reason on mobile devices it animates partially below the screen, then snaps up into it's correct position after.</p>

<p>I am fairly new to JS so I figure that is where the problem lies. Any insight would be greatly appreciated.</p>

<p>html:</p>

<pre><code>&lt;div id="center-height"&gt;
  &lt;div id="animation-container"&gt;
     &lt;div class="svg-container center" id="cocktail-container"&gt;
      &lt;svg class="svg-element" version="1.1" viewBox="0 0 216 460" preserveAspectRatio="xMinYMin meet"&gt;
        &lt;a xlink:href="http://getriot.com/work.php"&gt;
        &lt;path id="cocktail" stroke="#c59949" stroke-width="2.5" fill="#c59948" fill-opacity="0" d="M42.54,5.33c31.15,44.48,9.79,46.43,12.01,58.27c6.68,35.78,39.77,16.09,44.3,50.9c0.53,8.55-17.69,1.14-29.44-11.31c-1.18,26.57,12.31,37.77,14.74,39.01c9.65,4.9,29.03-0.27,29.34,28.13
        c4.57,16.8,30.31-5.01,32.47,1.79c1.5,6.01-2.35,6.84-5.09,19.96c-0.7,9.81,4.34,15.69,12.5,19.12
        c-6.71,11.63-15.11,26.2-16.41,28.45c-4.12,7.13-18.44,11.34-24.02,12.66c-12.25,2.89-23.31,10.62-30.1,22.39l-0.13-0.07
        c0,0-72.44,125.59-76.51,132.65c7.11,26.47,58.06,53.76,82.04,47.32c3.19-5.52,76.51-132.65,76.51-132.65l-0.05-0.03
        c6.79-11.76,7.95-25.23,4.31-37.28c-1.67-5.53-5.27-20.03-1.15-27.17c1.06-1.83,17.46-30.28,23.1-40.05
        c16.77-2.57,32.52-42.78,6.27-51.3c-9.39-2.26-5.62,16.56-23.17,13.77c6.18-10.6,12.26-19.79,12.02-30.06
        c-0.76-10.7-7.04-11.03-16.96-9.88c15.88-37.74-14.86-32.48-13.73-55.13c-13.94,8.29-5.51,32.7-12.76,29.02
        c-14.22-7.87-7.21-20.76-8.47-30.8c-0.58-4.63-2.43-20.58-34.97-35.74c2.7,4.73,8.25,30.08,2.87,29.5
        C89.1,75.59,88.6,65.63,86.79,58.91C86.31,47.62,70.43,24.26,42.54,5.33 M105.41,302.8c-10.89-1.97-26.02,10.8-20.82,34.33
        c4.68,13.26,12.81,9.4,15.76,29.63c1.78,12.16,17.48,12.41,22.63,7.18L81.8,445.33c-9.28,0.54-23.75-3.88-37.07-11.57
        c-13.09-7.55-23.33-17.19-27.35-25.52c0,0,49.66-85.79,53.78-92.93C76.74,305.62,91.8,290.69,105.41,302.8 M75.46,413.65
        c-4.78-2.76-10.89-1.12-13.66,3.66c-2.76,4.78-1.12,10.9,3.67,13.66c4.78,2.77,10.9,1.12,13.66-3.66
        C81.89,422.53,80.26,416.42,75.46,413.65 M78.39,365.17c-2.51-1.45-5.72-0.59-7.16,1.92c-1.45,2.51-0.58,5.72,1.92,7.16
        c2.51,1.45,5.72,0.59,7.17-1.92C81.75,369.83,80.9,366.61,78.39,365.17 M55.8,376.96c-3.34-1.93-7.6-0.78-9.52,2.55
        c-1.93,3.33-0.78,7.59,2.56,9.51c3.33,1.92,7.6,0.78,9.51-2.56C60.27,383.14,59.12,378.88,55.8,376.96"/&gt;
        &lt;/a&gt;
      &lt;/svg&gt;
    &lt;/div&gt;        
    &lt;h1 id="home-title"&gt;title&lt;br /&gt;&lt;span class="home-icons"&gt;&lt;i id="i-1" class="fa fa-object-ungroup"&gt;&lt;/i&gt;&lt;i id="i-2" class="fa fa-code"&gt;&lt;/i&gt;&lt;i id="i-3" class="fa fa-pencil-square-o"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/h1&gt;
  &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#animation-container {
display: block;
margin: 0 auto;
max-width: 78%;
overflow: hidden;
position: relative;
top: 45%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);}
</code></pre>

<p>JS:</p>

<pre><code>&lt;script&gt;
  $(document).foundation();
  var windowHeight = $(window).height();
  var animationHeight = $('#animation-container').height();      
  $('#center-height').css("height", windowHeight + 'px');
&lt;/script&gt;
</code></pre>

<p>If you want see it in action you can visit <a href="http://getriot.com" rel="nofollow">GetRiot.com</a>. Again, it works on desktop, but has that strange glitch on mobile.</p>