CSS animation issues on IOS

I'm having weird issues with animations on pretty much any browser on IOS. It's working fine anywhere else. The entire page is moving and I'm not sure I know why.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}    
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
body {
  overflow: hidden;
  background-color: #39c5f3;    
}
#dizio{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -97px;
    height: 62px;
}
#kapowsin{
    margin:20px auto;
    text-align: center;
}
#kapowsin img{
    width:300px;
}
.loading {
  position: absolute;
  text-align: center;
  z-index: 9999;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  letter-spacing: 1px;
  font-size: 13px;
  text-transform: uppercase;
}
.balloon {
  position: absolute;
  z-index: 99999;
  top: 50%;
  margin-top: -200px;
  margin-left: -75px;
  left: 50%;
  animation: speeder 4s linear infinite;
}
.balloon > img {
  position: relative;
  z-index: 9999;
}        

.balloon > span > span:nth-child(1), .body > span > span:nth-child(2), .body > span > span:nth-child(3), .body > span > span:nth-child(4) {
  width: 5px;
  height: 30px;
  background: #fff;
  position: absolute;
  animation: fazer1 2s linear infinite;
	animation-delay: -1s;
}

.balloon > span > span:nth-child(2) {
  left: 3px;
  animation: fazer2 2s linear infinite;
}
.balloon > span > span:nth-child(3) {
  left: 1px;
  animation: fazer3 3.4s linear infinite;
  animation-delay: -1s;
}
.balloon > span > span:nth-child(4) {
  left: 4px;
  animation: fazer4 2.5s linear infinite;
  animation-delay: -1s;
}
@-webkit-keyframes fazer1 {

}
@-webkit-keyframes fazer2 {
  0% {
    top: 0;
  }
  100% {
    top: -100px;
    opacity: 0;
  }
}
@-webkit-keyframes fazer3 {
  0% {
    top: 0;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}
@-webkit-keyframes fazer4 {
  0% {
    top: 0;
  }
  100% {
    top: -300px;
    opacity: 0;
  }
}
.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.longfazers span {
  position: absolute;
  width: 3px;
  height: 20%;
  background: #fff;
}
.longfazers span:nth-child(1) {
  left: 40%;
  animation: lf 4.8s linear infinite;
  animation-delay: -1s;
}
.longfazers span:nth-child(2) {
  left: 45%;
  animation: lf2 3.2s linear infinite;
  animation-delay: -1s;
}
.longfazers span:nth-child(3) {
  left: 50%;
  animation: lf3 3.4s linear infinite;
}
.longfazers span:nth-child(4) {
  left: 65%;
  animation: lf4 3.5s linear infinite;
  animation-delay: -1s;
}
.longfazers span:nth-child(5) {
  left: 35%;
  animation: lf5 4.5s linear infinite;
  animation-delay: -1.3s;
}
.longfazers span:nth-child(6) {
  left: 75%;
  animation: lf6 1.5s linear infinite;
  animation-delay: -2s;
}
@-webkit-keyframes speeder{
  0% {
    transform:  translate(0px,0px)  ;
  }
  19% {
    transform:  translate(-30px,-46px)  ;
  }
  39% {
    transform:  translate(-17px,-89px)  ;
  }
  66% {
    transform:  translate(-35px,-139px)  ;
  }
  100% {
    transform:  translate(-16px,-196px)  ;
  }
  101% {
    transform:  translate(-15px,-198px)  ;
  }
}


@-webkit-keyframes lf {
  0% {
    top: 200%;
  }
  100% {
    top: -200%;
    opacity: 0;
  }
}
@-webkit-keyframes lf2 {
  0% {
    top: 200%;
  }
  100% {
    top: -200%;
    opacity: 0;
  }
}
@-webkit-keyframes lf3 {
  0% {
    left: 200%;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes lf4 {
  0% {
    top: 200%;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes lf5 {
  0% {
    top: 300%;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes lf6 {
  0% {
    top: 100%;
  }
  100% {
    top: -300%;
    opacity: 0;
  }
}

And this is what it looks like: http://froglab.fr/dizio/loader-balloon.html