Avatar of Marco Gasi
Marco Gasi
Flag for Spain asked on

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 () {
			resolution: 512,
			dropRadius: 20,
			perturbance: 0.04
			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){
		}, 100);	
	} );

Open in new window

JavaScriptjQueryWeb Development

Avatar of undefined
Last Comment
Alexandre Simões

8/22/2022 - Mon
Alexandre Simões

I'm not able to access the site.
Gives me 403 Forbidden.
Marco Gasi

Alexandre Simões

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Marco Gasi

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?
Alexandre Simões

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Marco Gasi

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.
Alexandre Simões

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!
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.