CSS，jQuery和JavaScript在iPhone iPad上无法正常工作

Question

I just finished programing my own website, i uploaded it to my hosting on GoDaddy, is looking good on computers and on my android phone BUT on the iPhone and the iPad everything is wrong. I have some parallax effects, fixed backgrounds and a menu that goes up and get fixed position when getting to the top of the viewport, nothing of that works on these devices.

The scroll seams to be the biggest problem, i have a lot of things that moves or do something as you scroll the page down, all of these effect just applied when the smooth scroll stops, i read something about scroll momentum on IOs devices and this:

   overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

Is there some meta tags, pre-fixes i don't know about? I just can't make this work, thanks in advance.

Answer 1

The problem is that IOs devices turn off all the movement functions to achieve that smooth scroll that iPhone and iPads have when you navigate a website.

The best solution I found for this is: http://markdalgleish.com/projects/stellar.js/demos/

The other option is to detect if the user agent is on a iPhone or iPad and change the css styles to the objects with the parallax or other transition effects with this jQuery:

Js

var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
    $('#banner').addClass('ios-background');
}

Css

.ios-background{
    backgorund-attachment: scroll
}