title: Why does Firefox CPU usage jump to 100% as soon as a slideshow changing the width and left coordinates of some divs starts?
body: <h2>Question</h2>
  
  <p>Can someone please look at the code and tell me if I'm doing something that's driving up CPU usage in Firefox or if this is a Firefox bug? It's driving me mental at this point and I'm pretty much out of ideas. Hardware acceleration is enabled in Firefox.</p>
  
  <p>I have tried the same animation in Chrome, Chromium and PaleMoon without any issues. The CPU usage in all browsers except Firefox doesn't change all that much even after the animation's been running for over an hour but in Firefox, as soon as the animation starts, CPU usage jumps straight to over 90% and keeps rising (even if the tab is closed) until it reaches 100%. The only way to stop CPU usage is to kill Firefox altogether.</p>
  
  <hr>
  
  <h2>Hardware and OS</h2>
  
  <p>I am using a laptop with a core i7-4700mq processor, 16 GB RAM, 500 GB SSD and a 1 TB HDD.</p>
  
  <p>I am using Kubuntu 16.04 (with the KDE Project Neon repository added) and the kernel upgraded to 4.10.10.</p>
  
  <h2>Slideshow Description</h2>
  
  <p>The slideshow is quite simple and is supposed to:</p>
  
  <ol>
  <li><strong>Image is faded in.</strong></li>
  </ol>
  
  <p>This is achieved by using jQuery fadeIn().</p>
  
  <ol start="2">
  <li>Image starts to zoom in</li>
  </ol>
  
  <p>This is achieved by using CSS3 transition. A class is added to the image in jQuery which sets the width of the image to 120% and its left coordinates to -10%.</p>
  
  <p>If I remove this step, the animation runs perfectly and Firefox's CPU utilization does not change at all.</p>
  
  <ol start="3">
  <li><strong>After a set interval, the image is then faded out</strong></li>
  </ol>
  
  <p>This is done using jQuery fadeOut(). Once the div containing the image is faded out, the CSS class responsible for zooming in is removed from the image.</p>
  
  <ol start="4">
  <li><strong>Another image is faded in while the previous image is fading out</strong></li>
  </ol>
  
  <p>This is done using jQuery fadeIn(). Once the div has been faded in, the zoom in CSS class is added to the image.</p>
  
  <hr>
  
  <h2>Working Sample</h2>
  
  <p>You can find a working sample of the slideshow on <a href="https://codepen.io/iKazmi/pen/BRWPWQ" rel="nofollow noreferrer">codepen</a></p>
  
  <hr>
  
  <h2>Code</h2>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="slideshow"&gt;
      &lt;div class="slide" id="slide-1"&gt;
          &lt;img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/&gt;
      &lt;/div&gt;
      &lt;div class="slide" id="slide-2"&gt;
          &lt;img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slideshow{
      width: 100%;
      overflow: hidden;
  }
  .slide{
      width: 100%;
      overflow: hidden;
      position: absolute;
      text-align: center;
      background-position: center;
      background-repeat: no-repeat;
  }
  .slide img{
      position: relative;
      margin-left:0px;
      width:100%;
      min-width:100%;
      transition: all 8s;
  }
  .slide_zoom{
      width: 120%!important;
      margin-left: -10%!important;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var current=1;
  var prev=1;
  var counter=0;
  var slide_duration=8000;
  var transition_duration=700;
  var interval;
  var width=($(window).width()+200)+'px';
  $(function(){
      function slideshow_play(){
      console.log(current);
          $('#slide-'+current).fadeOut(transition_duration,function(){
              $('#slide_img-'+prev).removeClass('slide_zoom');
          });
          prev=current;
          if (current&lt;$('.slide').length){
              current=current+1;
          }
          else{
              current=1;
          }
  
          $('#slide-'+current).fadeIn(transition_duration, function(){
              $('#slide_img-'+current).addClass('slide_zoom');
          });
      }
  
      $('.slide').each(function(){
          var img=$(this).find('img');
          var src=$(img).data('src');
          var image=new Image();
          image.src=src;
          image.onload=function(){
              counter+=1;
              img.prop('src', this.src);
              if (counter==($('.slide').length)){
                  $('#slide-'+current).fadeIn(500);
                  var timeout=window.setTimeout(function(){
                      $('#slide_img-'+current).addClass('slide_zoom');
                      interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
                  },500);
              }
          }
      });
  });
  </code></pre>