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.
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.
Basically, there are three functions that look like this:
function cycleTheatrical(){
setTimeout(function(){
(theatPos < (theatArray.length-1)) ? theatPos+=1 : theatPos = 0;
$('#page-1-theatrical').append("<img src='" + theatArray[theatPos] + "' class='project-img' style='display:none'>");
$('#page-1-theatrical img:last-child').fadeIn(1500, function(){
$('#page-1-theatrical img:first').remove();
});
cycleHomeEnt();
}, 3000);
};
So what I am attempting to do is to append the new image with display:none, then fade it in over the old one. Once faded in, the callback function removed the old image.
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 display:none 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 display:none, then added a source in ( using .attr() ) before doing the fade, but the problem remained the same as before.
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:
http://www.thecrpgroup.com/crpweb/promo-site/
Thanks for any help!