title: Javascript background-attachment fixed
body: <p>The CSS <code>background-attachment: fixed;</code> does not work on mobiles because it takes a performance hit or something like that.</p>
  
  <p>Is there an alternative for this that fully works on mobile? </p>
  
  <p>I tried this:</p>
  
  <pre><code>$(window).scroll(function() {
    var scrolledY = $(window).scrollTop();
    $('div#home').css('background-position', 'left ' + ((scrolledY)) + 'px');
  });
  </code></pre>
  
  <p>But that was very choppy on my Mac using chrome, so I didn't even bother testing on my iPhone.</p>
  
  <p>I see many plugins for a parallax effect but can't find any that work on mobile. I saw some previous questions on this and other forums but those links were either dead or outdated now.</p>
  
  <p>In our ever advancing world, have apple been bothered to render stuff properly?</p>
  
  <p>Basically...
  <strong>Is there a fix to <code>background-attachment: fixed</code> that works on all devices including mobile?</strong></p>
  
  <p>Code from dmoo's link:</p>
  
  <pre><code>div#home {
      color: #404040;
  /*
      background: linear-gradient(to bottom, rgba(0,0,0, 0.375) 0%,rgba(0,0,0, 0.375) 100%), url(/images/sp-bg.jpg);
      background-size: cover;
  */
      overflow: hidden; 
      position: relative;
  
  }
  
  div#home:before {
      content: ' ';
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: white;
      background: url('/images/sp-bg.jpg') no-repeat center center;
      background-size: cover;
      will-change: transform;
  }
  </code></pre>