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>
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?
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õ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! :)
Gives me 403 Forbidden.