Why is this behavious strangely in iOS, but better in desktops?

I'm trying to create the same effect as http://ift.tt/1RknJpl - but my version seems to have some pretty awful bugs, that I need some help with.

I have a page at this URL: http://ift.tt/1FTyEBQ

This is using a combination of the twentytwenty image comparison slider (http://ift.tt/14c15aB) and Owl Carousel for the thumbnails (http://ift.tt/13yJsO1).

My issue is, whereas on the desktop, clicking on thumbnail will change the div above, and show the corresponding twentytwenty container. However on a mobile (I'm testing in iOS), when the page loads up, the initial slider is shown, but then when clicking on a thumbnail, the slider above disappears, and is not shown.

There's also another issue where as sometimes even on the desktop, the main divs won't be displayed, until the window is resized.. which I have no idea why.

Is there any way I can find out why this is happening? Any help is greatly appreciated!

I think this is the JS that corresponds to changing the main div when a thumbnail is clicked:

// TwentyTwenty comparison
function showSlide(slideNumber)
{  
    $(".image-compare-set").hide();
    $('.image-compare-set[data-image-num="' + slideNumber + '"]').show();
}
$(".twentytwenty").twentytwenty();
$(".image-compare-nav img").click(function() {
    showSlide( $(this).attr('data-image-num') );
});
showSlide(1);

UPDATE

It seems that within each main div, the height element of the slider containers is being set inline to 0, which is causing them to disappear. Maybe this needs to be added to the JS code that sets the parent div to display block?

Or maybe to set the height of the div to the same height of the images, when it is clicked? Does that seem to be how Mya have done theirs, as it seems to work perfectly, regardless of resizing, and loading.

Anyone?