How-to display a .gif as background image?

Question

Hi! I have a javascript "loading" function like this:

function splashScreen() {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode("some text"));
    div.style.position = "fixed";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.left = "0";
    div.style.top = "0";
    div.style.zIndex = "1000";
    div.style.background = "white url('img/ajax-loader.gif') no-repeat center";
    div.style.fontSize = "x-large";
    div.style.textAlign = "center";
    div.style.lineHeight = "3em";
    div.style.opacity = "0.75";
    div.style.filter = "alpha(opacity=75)"; // fix ie
    document.body.appendChild(div);
    return true;
}

I use this function in the form action (onsubmit="return splashScreen()") to show a "rotating logo" while the next page load... The problem is in that "img/loading.gif" and safari (on winXP): in ff and ie I have no problems, and I clearly see the animated gif. In safari I can't see it. If I change the image with a (obviously static) png the image appears... Am I doing something wrong? What's the problem with safari?

Answer 1

Safari doesn't handle animated background well enough. I've seen a bug report about that somewhere.

Why don't you just use an image instead of a background?

Answer 2

I'm not personally familiar with this issue, but I was able to find a handful of similar bug reports online. What else are you doing on this page? Are you keeping focus on the page when you experience this issue? Apparently the handling of animated GIFs is pretty complicated:

http://webkit.org/blog/96/background-music/
http://www.quirksmode.org/bugreports/archives/2004/12/animated_gifs_u.html
https://bugs.webkit.org/show_bug.cgi?id=7320

Particularly relevant snippet from that first link:

In both Safari 2 and WebKit nightlies, GIFs don’t animate unless they are being painted somewhere. If an animated GIF becomes invisible, then the animation will pause and no CPU will be consumed by the animation. Therefore all animated images in a background tab will not animate until the page in that tab becomes visible. If an animated GIF is scrolled offscreen even on a foreground page, it will stop animating until it becomes visible again.

Safari’s CPU usage with animated GIFs is very good. (For a while readers of MacNN thought Safari had an “animated GIF problem” because of slowness when typing in forum posts, but that bug actually had to do with the Flash ads at the top and bottom of the page.)

Answer 3

Maybe it's your gif image? I just fired up your code on Safari 4.0.4 under windows with a gif created on http://www.ajaxload.info/ and works flawlessly.