Titanium ScrollableView height is bigger on iOS

I currently have a scrollable view to scroll through some images. On Android it's fine, but on iOS the height seems to be a bit bigger as I have some text under the scrollable view and its being pushed down a bit on iOS, while on Android the text is right under where it should be

index.js:

var win = $.index;

if(Alloy.Globals.osname == "android"){
    win.backgroundColor = "#000";
}
//If iOS
else{
    win.backgroundColor = "#FFF";
}

 win.orientationModes = [
     Ti.UI.PORTRAIT,
     Ti.UI.UPSIDE_PORTRAIT
 ];


function textColor(){
    if(Alloy.Globals.osname == "android"){
        return "#FFF";
    }
    else{
        return "#000";
    }
}

var button = Titanium.UI.createButton({
   title: 'Test Button',
   bottom: 30,
   width: "75%",
   height: "auto",
   visible: false
});

var page_view = Titanium.UI.createView({
    top: 10,
    width: Ti.UI.SIZE,
    height: "85%",
    layout: "vertical",
    visible: false
});

var page_descr = Titanium.UI.createLabel({
    text: "This is a description",
    width: "75%",
    font: { fontSize: 36 },
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});

var page_image1 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_1.jpg",
});

var page_image2 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_2.jpg",
});

var page_image3 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_3.jpg",
});

var page_image4 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_4.jpg",
});

//Change the images to the iOS images
if(Alloy.Globals.osname != "android"){
    page_image1.image = "/images/screens_ios/ios_1.jpg";
    page_image2.image = "/images/screens_ios/ios_2.jpg";
    page_image3.image = "/images/screens_ios/ios_3.jpg";
    page_image4.image = "/images/screens_ios/ios_4.jpg";
}

var image_scroller = Titanium.UI.createScrollableView({
    width: "100%",
    height: "auto",
    showPagingControl: false,
    backgroundColor: "white",
    views: [page_image1, page_image2, page_image3, page_image4],
});

image_scroller.addEventListener('scrollend',function(e)
{
    label_step.text = steps(image_scroller.currentPage+1);
});


//Create a view to hold the scrollable view
var view_holder = Ti.UI.createScrollView({
    width: "75%",
    height: "60%",
    top: 5,
});

view_holder.add(image_scroller);

var label_step = Titanium.UI.createLabel({
    text: "Test text",
    top: 5,
    width: "70%",
    font: {fontSize: 21 },
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,

});

var label_slide = Titanium.UI.createLabel({
    text: "(Swipe to view next step)",
    font: {fontSize: 19 },
    top: 5,
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
    width: "70%",
});

page_view.add(page_descr);
page_view.add(label_step);

page_view.add(view_holder);
page_view.add(label_slide);

//Fix fonts
if(Alloy.Globals.osname != "android"){
    page_descr.width = "80%";
    page_descr.top = 30;
    page_descr.font = {fontSize: 19};
    label_step.width = "90%";
    label_step.font = {fontSize: 15};
    label_slide.top = 2;
    label_slide.font = {fontSize: 14};
    image_scroller.top = -120;
}
else{
    page_descr.width = "80%";
    page_descr.top = 30;
    page_descr.font = {fontSize: 15};
    label_step.width = "90%";
    label_step.font = {fontSize: 11};
    label_slide.top = 5;
    label_slide.font = {fontSize: 12};
    image_scroller.top = -120;
}

win.add(page_view);

button.addEventListener('click',function(e)
{
    alert("I clicked the button!");
});

win.add(button);
win.open();

The android image sizes are all: 768x735px while the iOS images are 475x475px. Here's a screenshot of what's happening on iOS, it's pushing the text "(Swipe to view next step)" down when it should be directly below the image of the iOS home screen: http://ift.tt/168qPJu