TwentyTwenty container doesn't display on mobile Safari

[graybeltran]

When I first view a page with a TwentyTwenty slider, no slider is initially visible because the container has a height of 0. Refreshing the page or rotating the device causes the slider to reappear.

Here's what I'm seeing when I visit http://zurb.com/playground/twentytwenty

After refresh:

[kccmcck]

I am also experiencing the same issue. @graybeltran, did you by chance find a fix for this?

[graybeltran]

@kccmcck I ended up adding a function to check to see if the images had loaded before firing twentytweny. That seemed to do the trick. Another, less ideal fix, would be to check if the container's height is equal to 0, and if it is, fire twentytwenty again.

[Winterhart]

I also have the same issue but only on Safari Mac when I disable status bar (in safari setting) the twenty-twenty module gets loaded. Anyone have solved this issue?

[Ingoknitto]

This worked for me:

var img = new Image();
img.onload = function() {		

	$(function(){
		$(\.twentytwenty-container[data-orientation!='vertical']\).twentytwenty({default_offset_pct: 0.7});
		$(\.twentytwenty-container[data-orientation='vertical']\).twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
	});
}
img.src = "photo/1B.jpg";

Where 1B.jpg is the second (after) picture and in bigger resolution.