title: Weird stuttering when generating animated gifs using gifshot.js on ios
body: <p>Ok, so a little bit of background... I'm trying to generate animated gifs from animations done on an HTML5 canvas using JavaScript. Specifically, I'm adding data layers to a Mapbox GL JS map and looping through them. </p>
  
  <p>On each iteration, I save the canvas element and transform it to a blob before calling URL.createObjectURL(blob) and setting that as the source to a new image. After the loop is finished I generate a gif using gifshot (<a href="https://github.com/yahoo/gifshot" rel="nofollow noreferrer">https://github.com/yahoo/gifshot</a>) and the images I previously created. </p>
  
  <p>This process works perfectly in all browsers (mobile too!) EXCEPT on iPhone ios. On ios the gif has weird stutters and transparency issues. I have tried other gif creation libraies but all have the same issue on ios. Could it be a memory problem or something? I'm at my wit's end on this, so any help is greatly appreciated!</p>
  
  <p>This is the code inside each loop:</p>
  
  <pre><code>var cv = map.getCanvas()
  var oneImage = new Image();
  
  cv.toBlob(function(blob) {  
      url = URL.createObjectURL(blob);
      oneImage.src = url
  
      images_arr.push(oneImage)
      i++;
      setTimeout(function(){
          gifLoop(images_arr);  
      },1000) 
  })
  </code></pre>
  
  <p>and this is the code I call when the loop is finished:</p>
  
  <pre><code>var w = window.innerWidth;
  var h = window.innerHeight;
  recalculated_size = calculateAspectRatioFit(w, h, maxWidth, maxHeight)
  w = recalculated_size.width
  h = recalculated_size.height
  
  gifshot.createGIF({
      'images': images_arr,
      'gifWidth': w,
      'gifHeight':h,
  },function(obj) {
      if(!obj.error) {
          var image = dataURItoBlob(obj.image)
          image = URL.createObjectURL(image);
  
          var animatedImage = document.getElementById('gif');
          animatedImage.src = image
  
          var link = $('#gif-link');
          link.attr('href',image);
          filename = curr_layer_id + '_' + curr_time +'.gif'
          link.attr('download', filename);
  
        }
   });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yBreJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yBreJ.gif" alt="Here is an example of the issue I&#39;m referring to"></a></p>