On this site, and a few others, I have used ‘old school’ animated gifs as backgrounds to some of my title elements and links and that. The animated gif has gained a reputation of being naff coz of all those spinning email icons and banner ads. But, about animated gifs, I say this: "Wha? Animated gifs? They’re alright."
Anyway, does anyone know why they don’t ‘work’ in safari? Is it ‘not correct’ to have background elements as animated gifs? If not, why not? And if yes, who? or / and when? etc.
I’ve also noticed that animated gifs as background images on :hover behaviors don’t work in FireFox (but do in our old friend IE6)?
Hmmm … I shall sit here stroking my chin and looking puzzled until someone gives me answers …
Actually, I’ve just remembered I’ve got a meat pie in the microwave. So I’ll just go consume that little pastry parcel of meaty delight, and then stroke my chin and go ‘hmmm’ a bit …
COMMENTS
Animated Gifs as Background images ... and as background rollover images seem to work fine in Firefox (Mac/IE), Safari, and IE6. What I’m not sure about is background images that are preloaded but never displayed until rollover… like if you have a static image as a link background or image and then you switch it out for an animated image when the users hovers on the link. If you give me some specific examples, I’ll try and do a little more reasearch.
I like your site design by the way. It feels kinda like an old-school zine ... in a good way.< /p>
@ Jason : Cheers Mate. Still got loads of tweaks and subtleties I want to ‘nail’. As for my kevadamson.co.uk site – well, loads still to do on that.Thanks for the animated .gif info. My ‘news-man’ background doesn’t seem to ‘work’ in Safari (at least in the version I have on my mac – OSX 10.2). Animated gif rollovers seem to work fine on most browsers if they are looping, like your own, but not if you want them to play once on rollover …It’s a puzzlement …
Yes, I’ve had the same problem on the launch of Digitalthread.com version 2 (http://www.digitalthread.com) with my top Homepage links: Safari only plays the first frame of the Rollover Background Animation of the small icons. But, I think there’s relief in sight… I was over at my friends house who has Tiger OSX (10.4.x) and Safari, and to my amazement, the rollovers animated! I don’t know if its a new Tiger affect, or just Safari and Tiger together, but I don’t think it’s a new version of Safari.Hopefull future versions of Safari will fix this with or without Tiger installed.
You've got a beautifully designed site here.
This is an old thread ;) but still relevant to me.
I have an issue where a "loader" .gif is not displayed in Webkit browsers (Chrome and Safari). It is in any other browser I can lay my hands on. It is a background image in an absolute positioned div.
Please look at this site (the dekbedovertrek webshop "assortiment" filter) http://dekbedovertrekshop.com
Thanks!
@ Kees : I'm wondering if it could be a position issue. I checked on Safari for Windows and it wasn't displaying.
Might be worth checking out this test page to see if animated .gifs are working in your version of the Safari browser:
http://tinyurl.com/yfr8672
Your blog site is wonderful. I enjoyed it. Plus your post is informative and concise. Thanks a lot :) I am a member of http://wegif.com/ and I'm an animator.
Still relevant!
I have the same problem, so it's still relevant.
Only in Firefox though. I have a couple of bouncing markers on a map as a test. They are static to begin with and then when you hover they should animate and bounce.
In Firefox they don't though. I have to hover the image, go off and then go over again to see the animation. Definitely has something to do with the loading of the images.
I remember there used to be a pre-load images function you could put onto a page to load the images before the hover. Can't think of it now though. Will have to check.
By the way, I tested this only in all the major latest browser versions as from this date of posting: (FF, IE, Opera, Chrome, Safari - on Windows)
Any ideas anyone on how to fix this?
Great design. Keep up the good work.