提前感谢任何可以提供帮助的人。我有一个包含动画的div，包含div使用简单的JS垂直居中于页面。它在桌面上完美运行，但由于某些原因，它在移动设备上部分地在屏幕下方动画，然后在它之后快速进入正确的位置。
我对JS很新，所以我认为这就是问题所在。任何见解将不胜感激。
HTML：
<div id="center-height">
<div id="animation-container">
<div class="svg-container center" id="cocktail-container">
<svg class="svg-element" version="1.1" viewBox="0 0 216 460" preserveAspectRatio="xMinYMin meet">
<a xlink:href="http://getriot.com/work.php">
<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"/>
</a>
</svg>
</div>
<h1 id="home-title">title<br /><span class="home-icons"><i id="i-1" class="fa fa-object-ungroup"></i><i id="i-2" class="fa fa-code"></i><i id="i-3" class="fa fa-pencil-square-o"></i></span></h1>
</div>
CSS：
#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%);}
JS：
<script>
$(document).foundation();
var windowHeight = $(window).height();
var animationHeight = $('#animation-container').height();
$('#center-height').css("height", windowHeight + 'px');
</script>
如果您想看到它的实际效果，可以访问GetRiot.com。同样，它适用于桌面，但在移动设备上有这种奇怪的故障。