iOs Safari and Google Chrome SVG animation doesn't show up - ios

Question

I have been struggling with this for quite a bit now.
.intro #intro-n,
.intro #intro-o,
.intro #intro-a2 {
stroke-dasharray: 400;
stroke-dashoffset: 400; }
.intro #intro-n {
/*-webkit-animation: intro-letters 0.9s linear;*/
-webkit-animation-name: intro-letters;
-webkit-animation-duration: 0.9s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-letters 0.9s linear;
animation: intro-letters 0.9s linear;
animation-name: intro-letters;
animation-duration: 0.9s;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s; }
#-webkit-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#-moz-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
http://codepen.io/anon/pen/ORkZwG
This code perfectly works on Windows(except IE) and Android devices, but when i try to launch it in iOS safari or even chrome SVG animations are blank.
Edit:
Yes, it works in iOS desktop Google Chrome version, but it doesn't work on iOS Tablet Chrome nor Safari

Answer 1

After spending a fair amount of time on this issue, I finally cracked it down, it seems that the issue was in this bit of code:
.intro svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 250px;
/*-webkit-animation: intro-hide-element 0s linear;*/
-webkit-animation-name: intro-hide-element;
-webkit-animation-duration: 0s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 5.1s;
-moz-animation-delay: 5.1s;
animation-delay: 5.1s; }
Particularly here:
-webkit-animation-duration: 0s;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
Where after changing it to:
-webkit-animation-duration: 0.001s;
-moz-animation: intro-hide-element 0.001s linear;
animation: intro-hide-element 0.001s linear;
The animations in safari tablet browser appeared, I'm not entirely sure why it works in chrome and not safari, but that was what did the trick for me, hopefully someone can explain a bit more in detail why this is happening but in the mean time hope it helps someone.