Cycle2 causes a flash of unstyled content when auto-height is used

[ghost]

Cycle2 causes a flash of unstyled content for a very, very short time but it is noticeable. The slideshow seems to disappear (the content below it moves up accordingly) and reappear (the content below it moves back). This seems to happen during auto-height calculation. Here is the HTML markup:

<div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-timeout="5000">
  <img src="01.jpg" alt="" width="800" height="200">
  <img src="02.jpg" alt="" width="800" height="200" style="display: none;">
  <img src="03.jpg" alt="" width="800" height="200" style="display: none;">
  <span class="cycle-prev">Prev</span>
  <span class="cycle-next">Next</span>
</div>
<p>This content appears below the slideshow, then moves up then down during auto height calculation.</p>

CSS markup:

.cycle-slideshow             { position: relative; z-index: 1; overflow: hidden; }
.cycle-slideshow img         { display: block; width: 100%; height: auto; }
.cycle-slideshow span        { position: absolute; bottom: 20px; z-index: 200; }
.cycle-slideshow .cycle-prev { right: 220px; }
.cycle-slideshow .cycle-stop { right: 120px; }

All images except the first one are set to display: none to prevent FOUC as suggested in documentation. All images are fluid width, auto height. z-index: 1 is set to prevent z-index issues with other widgets on the page.

I think the reason is as follows:

1. cycle2 first changes the images to position: absolute; which makes the container 0px tall and the content below the slideshow moves up
2. cycle2 changes container to position: relative; the container is still 0px tall
3. after 30 milliseconds the onResize handler is called which in turn calls initAutoHeight which creates a position: static slide to set the container height. The FOUC seems to appears for those 30 milliseconds.

[elpas0]

Try to set slideshow container height before running jcycle. slideshow container is hidden by default.

var slideshow = $('#slideshow');
slideshow
    .css('height', '0px')
    .show()
    .stop()
    .animate(
        { height : $(".slide:first", slideshow).height() +'px' },
        1000,
        'easeOutExpo',
        function(){ slideshow.cycle( options ); }
    );

[ghost]

Well, I am using declarative markup/auto initialization. I'll try to hook a function (that sets the height) inside one of the cycle initialization functions and unset the height afterwards.

[scottgale]

I have the same problem. Wondering if someone solved it. I'm going to try what schwarzenneger recommended but seems like the code should be updated.