Javascript doesn't work on smartphones and iPad

I have this page www.piccologroup.com/Main/index2.
I saw in my Android smartphone and in my Android tablets it just doesn't work: the overlay element doesn't fade out so the site remains inaccessible.
So I set in my media-queries the display property of the overlay to none, but on iPad the overlay still didn't fade out.
I commented out the overlay element from the page and I got this result
Normally www.piccologroup.com, but still on iPad the five images of the restaurants remains invisible.
I thought javascript wasn't enabled on iPad (I don't have an iPad: it's my client who noticed the issue), but this wouldn't explain why the original version didn't work on my smartphone and tablet, where I'm sure the javascript is enabled, so maybe it's another thing.
Google didn't help: any idea?
Thank you in advance for any suggestion.

The javascript:

<script type="text/javascript">
	$( document ).ready( function () {
		$('body').ripples({
			resolution: 512,
			dropRadius: 20,
			perturbance: 0.04
		});
		$('body').ripples('play');
		$('.overlay').ripples({
			resolution: 512,
			dropRadius: 20,
			perturbance: 0.08,
			interactive: true
		});
		var counter = 0;
		var interval = setInterval(function() {
			counter += 1;
			var $el = $('.overlay');
			var x = Math.random() * $el.outerWidth();
			var y = Math.random() * $el.outerHeight();
			var dropRadius = 20;
			var strength = 0.04 + Math.random() * 0.04;
			$el.ripples('drop', x, y, dropRadius, strength);
			if (counter === 10){
				clearInterval(interval);
				$('.overlay').fadeOut(2000);
				$('#restaurants:hidden').fadeIn(5000);
			}
		}, 100);	
	} );
</script>

Select all Open in new window