iPad Safari浏览器中的中心动画对象

Question

我正在尝试在iPad Safari浏览器上创建我的网站http://www.TheTapReport.com下方滚动动画“箭头”显示中心，而不是左对齐。文本“滚动”和鼠标对象看起来居中，但箭头不是。我已经在大多数浏览器上测试了这个动画，并且除了使用iPad之外，它们似乎总是居中。

#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: fixed;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
 }

#scrolldown > p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}

.mouse {
border: 2px solid #7C7D7F;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}
.mouse span {
display: block;
font-size: 1 em;
margin: 6px auto;  
 }
 @-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}

@-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
 }
 100% {
opacity: 0;
transform: translateY(5px);
 }
 }
 @-webkit-keyframes scroll {
 0% {
opacity: 1;
transform: translateY(0px);
 }
 100% {
opacity: 0;
transform: translateY(5px);
}
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}

谢谢