Android/HTML5/CSS3 Fade In issues

I'm having an issue regarding the Android browser. Not an Android app but a regular HTML5/CSS3 webpage involved webkit based CSS3 animation. Simple enough, I just want a div/section to fade in on the screen. Method I'm showing below works in iOS browser's but not Android browsers. What happens here is the fade in does occur and then the object disappears in开发者_C百科stead of sticking on the screen:

section {
width: 480px;
height: 100px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
background-image: url(images/home/bkg.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
z-index: 1;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
-o-animation-delay: 0s;
    -o-animation-fill-mode: both;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-moz-animation-delay: 0s;
    -moz-animation-fill-mode: both;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;

}

Apparently webkit-animation-fill-mode doesn't work on Android. You may have to make a work around in javascript by getting the last style of your animation and apply it on animation end.