Posted by Rob on 9 March 2005

1

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?

Posted by Peter Chylewski on 24 March 2005

2

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 ;-) ).

Posted by LB4 on 25 March 2005

3

Rob, doesn't work from where I sit.

Thanks Peter, your workaround just worked for me.

Has Justin reported it to Apple?

-l

Posted by Jeff Gnass on 19 May 2005

4

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.)

Posted by Photobiker on 6 November 2005

5

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.