Javascript doesn't work on smartphones and iPad

Marco Gasi
Marco Gasi used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Alexandre SimõesManager / Solutions Architect

Commented:
I'm not able to access the site.
Gives me 403 Forbidden.
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
Alexandre SimõesManager / Solutions Architect

Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Marco GasiFreelancer
Top Expert 2010

Author

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?
Manager / Solutions Architect
Commented:
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.
Marco GasiFreelancer
Top Expert 2010

Author

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
Alexandre SimõesManager / Solutions Architect

Commented:
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!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial