Safari seems to have a bug when it comes to swapping image sources using JavaScript. It seems that when swapping images, Safari will stretch the new image to the dimensions of the previous image.

View Test Page

This is a serious issue if you are building a cross-browser JavaScript image gallery. But there is hope, there are a couple of workarounds.

Workaround 1:

Load a blank or invisible image with the height and width of 1 pixel just before you load your replacement image.

Workaround 2:

Before you change the image source set the images style.display to ‘none’, swap the image src and then set the image back to style.display = ‘block’

Here’s an example of a basic image swap function with the Safari bug fix:

function swapImage() {
var imgElm = document.getElementById('preview');
imgElm.style.display = 'none';
imgElm.src = newImgSrc;
imgElm.style.display = 'block';
}

<img rc="firstImage.jpg" alt="image preview" id="preview" />