Backstretch in Safari doesn't fade between last image and first image

Question

Backstretch is an extension for jQuery that allows you to set dynamically resizable full window background images (website here)

I'm using it to make a background slideshow on my site (here)

Everything works fine on Firefox and Chrome. Under Safari the fadeIn/fadeOut glitches between the last image in the array and the first image in the array. Instead of fading in and out it simply jumps from one image to the next. It also generally looks "buggy" under Safari.

<script>
    $.backstretch([
      "images/one.jpg",
      "images/two.jpg",
      "images/three.jpg"
      ], {
        fade: 750,
        duration: 4000
    });
</script>

This is a copy/paste of the code from the official slideshow example and it's what I'm using on my own site (example slideshow.html in the examples folder when you download the author's complete package). It works under Safari using the author's example and doesn't feel buggy at all.

I'm trying to understand why my page works flawless on Chrome/Firefox but glitches on Safari, while his exact same code works flawless on all three.

score 3 · Answer 1 · answered Jul 08 '14 at 01:28

Found the problem, this is unlikely to help anyone else because the circumstances are quite peculiar, but you never know.

One of the images I was using was the quite rare "*.00_jpg_srz" compressed image format, and it was also a staggering 3.6mb in size.

Firefox and Chrome digested it no problem, Safari didn't like it so much!

If you have problems with the backstretch jquery plugin not fading images in and out properly check your file format and make sure the file is an acceptable size.

Backstretch in Safari doesn't fade between last image and first image

1 Answers1