jquery animation problem with Android 4.1.2

Hi all. I have a couple of sites using jquery animation to make elements appears on scroll. All works fine but in my amung Galaxy Tab II with Android 4.1.2:
with Firefox, the animation just doesn't work and the page appears empty
with the default browser the elements appear but they flash while scrolling

Here you can see a live example: tsd.webintenerife.com

Thanks to all in advance
LVL 32
Marco GasiFreelancerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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.

That page is really slow loading.  That may be part of the problem is just the very large graphics load, and that may be the reason the default is flashing. For those kind of scrolling effects there are sometimes rendering issues with Chrome and android, but generally Firefox does pretty well. However Firefox is a bit tougher on markup errors and you have a few reported by the validator around the iframe, and a duplicate id.

With jquery on mobile you never know from one device to the other what is going to work, and even across version of the same device thing don't always work.  The definition of standards in mobile is "whatever we do should be the standard and we expect other manufacturers to do things our way"; sort of like pc standards were 15 years ago.


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:
Hi Cd&.
I've just opened a ticket about the slow loading because 8 hours ago it wasn't so mutch. But probably I could better optimize images.
I found a duplicated class: do you meant that?
Anyway, if I understand your word, the solution is to eliminate jquery animation or suppress them if not supported: what do you suggest?
What is the better way to detect, overall in mobiles, if jquery is supported?
Thank you
Marco GasiFreelancerAuthor Commented:
Hi Cd&.
I had partially misunderstood your post. Thinking better, I understood what you meant and  I found that fixing html errors made Firefox works fine even in Android 4.1.2.
Still remains the flickering issue and I hope to fix it with a better optimization of the images.
Thank you so mutch.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Marco GasiFreelancerAuthor Commented:
Thank you, COBOLdinosaur.
Sorry I'm slow getting back, Once  I notice its the weekend.... well...

You might be able to reduce the load just by reducing the image resolution. Generally you can achieve a 25 to 30% file size saving with a small reduction in quality that is only going to be noticed by the most picky of graphics designers.

S for the scripting issues, the best approach is to not do anything if the scripting is just doing effects; and use a <snscript> tag to use alternate code.  That way you don't need to detect anything, the noscript will only implement when the script can'r regardless of the device or os.

Marco GasiFreelancerAuthor Commented:
Thank you Cd&. With <noscript> tag I could serve  different css and js files! I should think about before! Anyway, just fixing html errors solved the issue I had found. I must be more diligent in using validators :-)
I generally validate as I go along as I put in new modules, I run validation so at the next step I don't get problems related to stuff I thought was finished. For me it is automatic and I have the validator links right in my bookmark toolbar.

A funny this is how often a member will object to me telling them they have validation errors because "browser ignore errors".  The fact is they don't ignore them. During parsing they have to generate additional code to work around the errors, and sometimes the workarounds are a problem.

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

From novice to tech pro — start learning today.