Swiper.js vertical sliding doesn't work in ionic on iphone - angularjs

Question

I've been trying to create a a mobile app with Ionic.
I am using slider.js to slide between certain DIVs.
The app was working properly until suddenly the vertical slider decided to not display itself. Completely invisible.
The strange part is that it is working 100% correctly on the browser in the ionic lab.However It does not work on my Iphone. I've tried using PhoneGap developer app and ionic view app , both of them same result , doesn't get displayed.
Another strange thing happens is that , If I change the swiper to be horizontal , it works.
Any help is appreciated.Thank you.
Here is my HTML code :
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="child in home.models[0].children" end-repeat>
<div class="card" style="border: 1px #D9D9D9 solid">
<div class="item item-text-wrap">
<ion-list>
<ion-item class=" item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center"><b>{{ child.name | capitalizea}}</b></h2>
<p>15 / 35</p>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class=" item-avatar item-icon-right" type="item-text-wrap" href="#" ui-sref="tab.profile-dashboard({id:child.manager.id})">
<img width="100%" ng-src="{{child.manager.image_path}}">
<h2 class="capitalizeff"> {{ child.manager.name}}</h2>
<p> {{ child.manager.title}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<img width="100%" ng-src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/keditbookmarks.png">
<h2>Achieve 100 goals</h2>
<p>35 / 100</p>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center;padding-top: inherit">Food</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center;padding-top: inherit">fruits</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
</div>
Here is my JS code :
.controller('HomeCtrl', function ($scope, $rootScope) {
var vm = this;
var mySwiper = new Swiper('.swiper-container-v', {
slidesPerView: 1,
spaceBetween: 50,
direction: 'vertical',
observer: true
});
});
Here is the css :
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}