title: jQuery image cycle flickering on iOS devices
body: <p>For the site I am currently building, I want to utilize cycling images for one section (IE a series of images crossfade in a single container.) As this is largely a learning process for me, I am writing most of the javascript and jQuery myself instead of using prebuilt plugins.</p>
  
  <p>The cycle works perfectly (as far as I can tell) on all desktop browsers, but when tested on iOS devices, I get a flicker each time a section starts to cycle to a new image.</p>
  
  <p>Basically, there are three functions that look like this:</p>
  
  <pre><code>function cycleTheatrical(){
     setTimeout(function(){
      (theatPos &lt; (theatArray.length-1)) ? theatPos+=1 : theatPos = 0;
      $('#page-1-theatrical').append("&lt;img src='" + theatArray[theatPos] + "' class='project-img' style='display:none'&gt;");
      $('#page-1-theatrical img:last-child').fadeIn(1500, function(){
      $('#page-1-theatrical img:first').remove();
      });
      cycleHomeEnt();
  }, 3000);
  };
  </code></pre>
  
  <p>So what I am attempting to do is to append the new image with <code>display:none</code>, then fade it in over the old one. Once faded in, the callback function removed the old image. </p>
  
  <p>When viewed in an iOS device, I see a brief flash of the new image, just for one fraction of a second, before it disappears and the cross fade happens normally. My first assumption was that the <code>display:none</code> was not getting set until after the image was set, so I build an alternate version that appended an image with no source set to <code>display:none</code>, then added a source in ( using .attr() ) before doing the fade, but the problem remained the same as before.</p>
  
  <p>So does anyone know what causes this brief flicker on iOS devices? You can view the WIP site here, to see what I am talking about:</p>
  
  <p><a href="http://www.thecrpgroup.com/crpweb/promo-site/" rel="nofollow">http://www.thecrpgroup.com/crpweb/promo-site/</a></p>
  
  <p>Thanks for any help!</p>