title: Mobile Safari parallax scroll not working
body: <p>I have developed this JavaScript code to do parallax scrolling on an image at the top of the page.  The code works flawlessly in Chrome, FF, IE, Opera and Safari, on desktop.  When I test it on Safari on my iPad though, it ignores the parallax scrolling all-together, and just scrolls normally past the image.  I have tried to debug from my iPad, but it doesn't seem to be working because I have a Windows computer.  Does anyone see any reason why this wouldn't work on mobile Safari?  Note:  I also tried implementing <code>background-position-x</code> and <code>background-position-y</code> from another StackOverflow post, but it didn't help at all.</p>
  
  <p><b>JS Code:</b></p>
  
  <pre><code>   var getHeight = window.innerHeight;
      if (getHeight &gt; 750) {
          $('#bannerImage').each(function () {
              var $obj = $(this);
  
              $(window).scroll(function () {
  
                  var yPos = -($(window).scrollTop() / 5);
                  var xPos = -($(window).scrollLeft() / 5);
                  var bgpos = yPos + 'px';
                  var bgposx = xPos + 'px';
                  var coordinates = bgposx + ' ' + bgpos;
  
                  $("div#slideshow div img").css('background-position', coordinates);
                  $("div#slideshow div img").css('background-position-x', bgposx);
                  $("div#slideshow div img").css('background-position-y', bgpos);
  
              });
          });
      }
  });
  </code></pre>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;div class="BannerContainer"&gt;
  &lt;div class="vibeBannerRotator"&gt;
  &lt;div id="bannerImage"&gt;
  &lt;div id="slideshow"&gt;
  &lt;div id="imgContents_1"&gt;
  &lt;img style="background-image: url('/Images/ssie_images/SSIE-Header01.jpg'); background-repeat: no-repeat; background-size: 100%;"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>