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>

Open in new window

LVL 32
Marco GasiFreelancerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
I'm not able to access the site.
Gives me 403 Forbidden.
0
Marco GasiFreelancerAuthor Commented:
0
Alexandre SimõesManager / Technology SpecialistCommented:
Try it with FireFox, it won't work either.

The problem is with a jquery plugin you're using: jquery.ripples.js
If you remove it everything should work properly.

Even if you open the plugin page  with FireFox you'll see the error on the bottom left corner saying:
Error: Your browser does not support at least one of the following: WebGL, OES_texture_float extension, OES_texture_float_linear extension.
The same should be happening in Safari.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Marco GasiFreelancerAuthor Commented:
Alexandre, I'm sorry, but in my Firefox (39.0) everything works well, though I think the cause is the plugin me too. Probably, Safari has not fixed the bug (if it's a bug).
I'll try to remove it and see if my client can access the site.
But I'm sorry to leave that effect... Maybe you know how I can test if it is supported and then enable/disable the plugin?
0
Alexandre SimõesManager / Technology SpecialistCommented:
I tested with FF 38.0.1 and it didn't work and I just updated to v39 and it doesn't work either.
At least not on my machine.
On IE10 it also doesn't work, but IE11 works.
Chrome also works everywhere.

So I would say, drop the plugin :)

Two extra considerations about that plugin:
1. It doesn't seem to make much sense on tablets any way as it's bound to the mouse... I'm not sure ehat the effect will be.
2. It puts the CPU usage very high. Just open the Task Manager and look at the CPU usage of the Chrome process. Here I see constant values floating between 70% and 80%. It's way too much for an effect.
Putting this in a mobile device will kill the website.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Marco GasiFreelancerAuthor Commented:
Thank you very mutch, Alexandre.
I think we'd need some ultyimate tool to test anything: the fact the same version of the same browser give different results in different machine makes it almost impossible to debug something.
I'll drop the plugin, but in the desktop/laptop the effect was quite amazing.
Cheers
0
Alexandre SimõesManager / Technology SpecialistCommented:
Web development has these things! :)

Anyway, always pay attention to the CPU usage of these fancy plugins, usually they take way too much CPU.
My last experience with this was our designer that came up with this pretty cool loading spinner done completely with CSS3. The problem was when I saw the CPU usage of that thing on normal client machines. I was surprised to see a steady 100%!! :)
Once the spinner was hidden, everything was going back to normal.
In this case, GIF's are our friends! :)

Cheers mate!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.