title: Parallax effect is laggy an jumps
body: <p>Ok. Im trying to make a parallax website that works on every browser. I have achieved the effect on all browsers but it is laggy and jumpy in some browsers. Is there any way to make it smooth?</p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Draw(){
      requestAnimationFrame(Draw);
      scrollEvent();
  }
  
  Draw();
  
  function scrollEvent(){
      var height = $(window).height();
  
      if($(document).scrollTop() &lt;= height){
          $('#home').css('transform', 'translate3d(0, ' + ($(document).scrollTop() + 'px, 0)'));
          $('#about').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - height + 'px, 0)'));
      }else if($(document).scrollTop() &lt;= 2*height){
          $('#about').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -height +  'px, 0)'));
          $('#gallery').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 2*height + 'px, 0)'));
      }else if($(document).scrollTop() &lt;= 3*height){
          $('#gallery').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -2*height + 'px, 0)'));
          $('#blog').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 3*height + 'px, 0)'));
      }else if($(document).scrollTop() &lt;= 4*height){
          $('#blog').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -3*height+ 'px, 0)'));
          $('#contact').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 4*height + 'px, 0)'));
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*...............................fonts..................................*/
  @font-face {
      font-family: 'aka-acid-typogroteskregular';
      src: url('../fonts/actypogrotesk-webfont.eot');
      src: url('../fonts/actypogrotesk-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/actypogrotesk-webfont.woff2') format('woff2'),
           url('../fonts/actypogrotesk-webfont.woff') format('woff'),
           url('../fonts/actypogrotesk-webfont.ttf') format('truetype'),
           url('../fonts/actypogrotesk-webfont.svg#aka-acid-typogroteskregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  .font{
   font-family: 'aka-acid-typogroteskregular';
  }
  
  /*...............................colors..................................*/
  .black{
   color:#000000;
  }
  
  .white{
   color:#ffffff;
  }
  
  /*...............................text-centering..................................*/
  .text-center{
   text-align:center;
  }
  
  .text-right{
   text-align:right;
  }
  
  /*...............................navigation..................................*/
  nav{
   padding-right:100px;
  }
  
  nav ul{
   list-style:none;
  }
  
  nav ul li{
   padding:30px 20px 20px 20px;
   cursor:pointer;
  }
  
  nav ul li:hover{
   color:#DCDCDC;
  }
  
  *{
      -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
   padding:0;
   margin:0;
   letter-spacing:2px;
  }
  
  .inline{
   display:inline-block;
   *display:inline;
   zoom:1;
  }
  
  html, body
  {
      width:100%;
   height:100%;
  }
  
  .cont{
      width:100%;
      height:100%;
      overflow:hidden;
      position:relative;
      webkit-overflow-scrolling:touch;
  }
  
  
  .rlt-container{
   position:absolute;
   width:100%;
   height:100%;
      display:block;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-position:center top;
      -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
  }
  
  .first{
      -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }
  
  .others{
      -webkit-transform: translate3d(0, 100, 0);
     -moz-transform: translate3d(0, 100, 0);
     -ms-transform: translate3d(0, 100, 0);
     transform: translate3d(0, 100, 0);
  }
  
  .overlay123{
   position:absolute;
   width:100%;
      height:100%;
      z-index:999;
   background-image: url('../media/backgrounds/dark_overlay.png');
  }
  
  .title-cont{
   position: absolute;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   top:50%;
   margin-top:-49.5px;
  }
  
  .title{
   font-size:82px;
   font-weight: 200;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;?php include 'incl/base_url.php';?&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/global.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;!--[if lt IE 9]&gt;
     &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;!--Home--&gt;
    &lt;div class="cont"&gt;
     &lt;div class="overlay123"&gt;
      &lt;header&gt;
       &lt;?php include 'incl/nav.php';?&gt;
      &lt;/header&gt;
      &lt;div class="title-cont text-center"&gt;
       &lt;h2 class="title font white"&gt;Liokoki&lt;/h2&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="home" class="rlt-container first" style="background-image: url('media/backgrounds/MG_0069.jpg');"&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--About--&gt;
    &lt;div class="cont"&gt;
     &lt;div class="overlay123"&gt;
      &lt;div class="title-cont text-center"&gt;
       &lt;h2 class="title font white"&gt;About&lt;/h2&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="about" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0129.jpg');"&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Gallery--&gt;
    &lt;div class="cont"&gt;
     &lt;div class="overlay123"&gt;
      &lt;div class="title-cont text-center"&gt;
       &lt;h2 class="title font white"&gt;Gallery&lt;/h2&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="gallery" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0107.jpg');"&gt;
  
     &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;!--blog--&gt;
    &lt;div class="cont"&gt;
     &lt;div class="overlay123"&gt;
      &lt;div class="title-cont text-center"&gt;
       &lt;h2 class="title font white"&gt;Blog&lt;/h2&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="blog" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0142.jpg');"&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Contact--&gt;
    &lt;div class="cont"&gt;
     &lt;div class="overlay123"&gt;
      &lt;div class="title-cont text-center"&gt;
       &lt;h2 class="title font white"&gt;Contact&lt;/h2&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="contact" class="rlt-container others" style="background-image: url('media/backgrounds/DJI_0011.jpg');"&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="js/effects.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>