jQuery .cycle() is invisible in Webkit browsers [Safari / Chrome] on first load (after refresh everything works fine!)

Question

I'm using jQuery cycle to implement a slideshow effect.

You can click on any slideshow image to slide to the next one.

This works fine in all browsers. Only in Safari, something really weird happens. Upon the first page load, no slideshow images are displayed at all! After reloading the page (either by refreshing or by hitting the 'Go' button next to the address bar), everything works like it should.

What is going on here? Am I doing something wrong? How can I fix this?

---

Update:

I'm using the latest versions of both jQuery and the Cycle plugin. Here's the code I'm using to invoke .cycle():

if (1 < $('.image-list li').size()) {
 $('.image-list').cycle({ fx: 'uncover', speed: 200, timeout: 4000, next: $('.image-list li') }).addClass('image-list-cycle');
}

Answer 1

If you just google for this error, you will find plenty of people having troubles with the jQuery plugin applied to images. Troubles happens usually in terms of position and showing.

My feeling is that sometime the script is run just before the images are loaded and the used width/length values for cycling the images are wrong. I would suggest you to add something like this to your page (adapt classes and names to your needs):

<script type="text/javascript">
  $(document).ready(
    function() {
      $('.image-list li').each(function({$(this).css({
        [SET HERE POSITION, WIDTH, ETC]});});
      $('.image-list').cycle([OPTIONS]);});
</script>