1 Posted by Rob on 9 March 2005 | Permalink

I know Firefox has a similar problem. I found a workaround by explicitly setting the width/height to 'auto' just after I swap the image.

Something like this:
oImg.src = 'whatever.jpg';
oImg.style.width = 'auto';
oImg.style.height = 'auto';

I can't test on Safari, but perhaps this workaround would carry over?

2 Posted by Peter Chylewski on 24 March 2005 | Permalink

Thank for the observation - I've had the same problem.

Possible workaround:

1. Test for Safari:
safari=(navigator.userAgent.indexOf('Safari')!=-1);

2. Before before showing the next image, load some dummy image (say 1px x 1px, color like the background-color; I just used the first image in the lot - happened to work in most cases). Safari won't flicker, others do (hence 1.).

Here you might check whether it works:

http://www.vischervettiger.ch

(click 'Porftolio')

You might use my JavaScript code, but please drop me a note if you do (maybe you'll find other bugs in there ;-) ).

3 Posted by LB4 on 25 March 2005 | Permalink

Rob, doesn't work from where I sit.

Thanks Peter, your workaround just worked for me.

Has Justin reported it to Apple?

-l

4 Posted by Jeff Gnass on 19 May 2005 | Permalink

A dependable workaround to eliminate this problem I found is to load newImage before setting the newImage object properties, e.g.

imgElement.src = 'newImage.jpg';
imgElement.width = 300;
imgElement.height = 400;

If the newImage width and height properties are set before the newImage is called, then the image being replaced will immediately become coerced (distorted) to the new dimensions until the newImage has finished downloading. This is a bigger issue for users viewing large images or with slow dialup connections.

One of the comments showed setting newImage.style width and height properties, while I am setting the object properties. There may be a difference in the two methods. I have the luxury of knowing the newImage dimensions, so it is easy to set these properties.

This method is working well for me on Safari 1.3 and 2.0, Firefox 1.0, Mozilla 1.7.3, and IE6, browsers I currently have access to. (Sorry no URLs.)

5 Posted by Photobiker on 6 November 2005 | Permalink

A workaround is to attach an onLoad() handler to the IMG element that runs the following code:
if (navigator.userAgent.indexOf('Safari')!=-1) {
var elt = document.getElementById("MYIMAGE");
elt.style.height = (elt.height - 1) + "px";
elt.style.height = (elt.height) + "px";
}
Tickling its height a little bit is enough to make the image fold back inside its intrinsic dimensions.

6 Posted by Tatham Oddie on 26 March 2007 | Permalink

I just came across this issue myself in both Safari 1.3 and 2.0.

As per LB4 - Rob's idea didn't work for me but Peter's did.

I alos tried loading a non-existant image first, then the real image but this didn't work.

I didn't test Jeff's idea as I didn't know the image size (hence why I need automatic resizing to work).

7 Posted by WAi on 15 June 2007 | Permalink

I've just come across this problem on Safari too.

I would love to try Peter's idea, but I'm a complete novice at all of this and don't know how to do his step 2 (loading the dummy image first, before loading the proper image to be shown).

Unfortunately, I can't really make sense of the source code of Peter's linked page either...

Could anyone help please? THanks.

8 Posted by Jez Caudle on 9 July 2007 | Permalink

I work for a large dating site and we had the same problem along with Opera. The method we use is simple:

Hide the image
Swap the image
Show the image

So we do:
mainImage.style.display = 'none';
mainImage.src = PicArray[imageid];
currentPic = imageid;
mainImage.style.display = 'block';

We used to test for Safari and Opera but now we don't bother.

I hope this helps.

I was trying to get the new image size while the image was hidden. IE 6,7 and Firefox 2 all report the image size but Safari will report the image size as 0 if it is hidden as per above.

9 Posted by James on 10 October 2007 | Permalink

Hi

I ran into this problem but was using the Dreamweaver preset function MM_Swapimage to handle the image swap.

Following the general principle set out by Jez above, here is how I managed to get the function to work as desired:

The last line of the function currently says:

x.oSrc=x.src; x.src=a[i+2];}

Just change it to:

x.oSrc=x.src; x.style.display='none'; x.src=a[i+2]; x.style.display='block';}

10 Posted by Petrovich on 19 October 2007 | Permalink

To resolve problem in safari :

var newImg = new Image();
newImg.src = src;
Img.width = newImg.width;
Img.height = newImg.height;

Img.src = src;