[Resolved] Problem with Safari & jQuery Cycle plugin

Logoleptic · 2007-09-18 20:14:19

I’m using the Cycle plugin to create a slideshow of linked images on this in-development version of a client’s site.

My client, who uses Safari 2.0.4 as his primary browser, reports that the slideshow fades to white after the first image and then does nothing. The demo animations on the Cycle website work just fine for him.

I set up a page of minimal Cycle test cases to whittle this problem down to its essence. (Note: Test cases 1a and 2a will pause if you rest your mouse cursor next to them, because there’s no CSS applied to constrain their width.)

I asked my client to take a look at those tests. Some of them use the same markup structure as the “official” Cycle examples, so I expected those tests to work. After viewing the test page, however, he reported some odd results:

When I first loaded the test page, all examples of the animation were working. After a while, the top one, Case 1a, stopped (paused) but did not go blank. All the other cases continued the animation. I reloaded the page and then all cases faded to blank white space. I have reloaded the page a multiple times and the animation now fails consistently.

I just reloaded again from your link, into a new tab, but did not open the tab for a minute. When I did the animation was working. This seems pretty consistent — tried it four times, if I do not open the tab for a minute, animation works. If I open the tab right away, before the first fade, or have it open in a new window, it fails.

Can anyone using Safari 2 confirm this behavior on the development site and my test page? So far I’ve only been able to get confirmation that the slideshow fails in version 1.3 (as expected) and works perfectly in 3.0 beta. Before I fiddle with this further, I want to make sure that this problem isn’t isolated to my client’s computer.

If this is repeatable, does anyone have a suggestion for how it might be fixed? I’ve also made a post to the jQuery Google Group about this, and will update here if anything comes of that. Thanks in advance for the help. :-)

Last edited by Logoleptic (2007-09-28 17:52:09)

colak · 2007-09-19 05:59:09

Not enough time to test it properly but i can tell you that your test page does not work on safari 1.3.2. The first image loads, fades out to white… and that is where it stops. The same happens on the dev’s page

Last edited by colak (2007-09-19 06:01:10)

Logoleptic · 2007-09-19 07:07:26

colak wrote:

Not enough time to test it properly but i can tell you that your test page does not work on safari 1.3.2. The first image loads, fades out to white… and that is where it stops. The same happens on the dev’s page

Yes, that’s correct. The jQuery library isn’t officially compatible with Safari 1.3.x, and that version isn’t part of this site’s compatibility profile: less than 1% of the current site’s visitors use a Safari version older than 2.x. The final version of the new site’s JavaScript will filter out old Safari versions, showing them just the first image in the series.

Thanks for taking the time to look at it. If you get a chance to check it out in Safari 2, please let me know what you see.

marios · 2007-09-19 09:45:35

colak wrote:

Not enough time to test it properly but i can tell you that your test page does not work on safari 1.3.2. The first image loads, fades out to white… and that is where it stops. The same happens on the dev’s page

Same on version 2.0.4

regards, marios

Logoleptic · 2007-09-19 16:33:05

Woot! Yay for confirmation!

I’m in correspondence with the author of the Cycle script, but he doesn’t have a Mac to test on either. I’ll post an update to the test suite later on, based on whatever suggestions he has. If you guys could take a look at that once it’s up, I’d really appreciate it.

By the way, does anyone have suggestions on how to get a used Mac Mini or something so that I can test this stuff myself? I’d considered eBay, but the stories I’ve heard of increasing fraud there have given me second thoughts.

colak · 2007-09-20 08:27:50

Did you try using aro_slideshow instead? It works just fine with older safaris and ff. The downside is that it uses mootools instead of jquery.

Last edited by colak (2007-09-20 08:31:05)

Logoleptic · 2007-09-20 11:49:00

I strongly considered that plugin. I’m using jQuery because of Thickbox, but there’s now a Thickbox clone for mootools. Switching libraries wouldn’t be a big deal at all, but I don’t see any way to use aro_slideshow with linked images like the ones on the development site and test page. I may have missed something when I skimmed the plugin’s forum thread, so I’ll go back through it later today.

Update about the whole “broken in Safari” thing: the author of the Cycle plugin thinks that the problem may be rooted in the fade transition. I’ve updated my test page with alternative transitions. The last example on the page still uses fade, but with the exact same settings as an official Cycle demo that I’ve been told works. If someone has time to look at the test page in Safari 1.3.x or 2.x, I’d be interested to know what works and what doesn’t.

Thanks again for your help, everyone. :-)

Edit: That mootools Thickbox clone actually isn’t looking like such a good idea after all. It causes huge memory spikes in IE every time the effect runs. This particular site could get by with Slimbox for now, though.

Last edited by Logoleptic (2007-09-20 12:09:08)

colak · 2007-09-20 13:04:42

I’ve updated my test page with alternative transitions. The last example on the page still uses fade, but with the exact same settings as an official Cycle demo that I’ve been told works. If someone has time to look at the test page in Safari 1.3.x or 2.x, I’d be interested to know what works and what doesn’t.

Hi Adam,
all I can tell you is that none work on safari 1.3.2. which is what i have whereas aro_slideshow does.

What I see in your test page using safari

Case #1x – I see the images… but no effects.
Case #2a – Just disappears
Case 2b – All I see is one image (the kestrel) whilst the demo you link to works just fine.

Logoleptic · 2007-09-26 18:29:02

After some investigation, it looks like the problem is with jQuery’s animate method (or perhaps with how Cycle uses it, hard to say). I’ve found and modified another freely-available image rotation script that works in Safari. The in-development site now has Safari 2 and under use that script, while everyone else gets Cycle.

Here’s the problem: my client tells me that my test page for this new animation works, but the dev site does not. I’ve also set up a test page that uses the exact same images as the dev site, but haven’t heard back from him on that one yet.

Could a Safari user please check this out, and let me know how it works? You’ll also see a debugging message that states your browser version (or WebKit/Gecko version for Safari and Firefox). If you can include that info, it would also be helpful. Thanks again!

colak · 2007-09-27 06:38:53

Safari 1.3.2

in-development site – the debug dialogue appears, the first image loads, fades out and stops.
test page – works just fine
a test page that uses the exact same images – as above:)

Logoleptic · 2007-09-27 15:47:39

[bangs head against wall]

Apparently the new (non-Cycle) animation isn’t failing because of a JavaScript problem, but because either the XHTML or CSS used on the dev site is triggering a Safari bug (one that’s fixed in version 3).

I’ve set up yet another test page. This one is a copy of the home page, but without any CSS at all. I’ve asked my client to check this out with his copy of Safari, but if someone else can get to it first it would give me a head start on narrowing this problem down. Thanks, again, for your help.

[Goes off to search eBay for Mac Minis and google ‘safari javascript bugs’…]

Logoleptic · 2007-09-28 17:51:31

Finally got it working!

The ugly hack that did the job: using JS to wrap a table around the slideshow in Safari 2 and older. Not the most elegant solution in the world, but it works.

Textpattern CMS

Textpattern CMS support forum

#1 2007-09-18 20:14:19

[Resolved] Problem with Safari & jQuery Cycle plugin

#2 2007-09-19 05:59:09

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#3 2007-09-19 07:07:26

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#4 2007-09-19 09:45:35

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#5 2007-09-19 16:33:05

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#6 2007-09-20 08:27:50

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#7 2007-09-20 11:49:00

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#8 2007-09-20 13:04:42

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#9 2007-09-26 18:29:02

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#10 2007-09-27 06:38:53

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#11 2007-09-27 15:47:39

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

#12 2007-09-28 17:51:31

Re: [Resolved] Problem with Safari & jQuery Cycle plugin

Board footer