Blurry Images? No Blurry Images on Chrome, only on IE/FF… Why?

Question

I have been working on a website, and I've used pictures of texts extensively for the style and looks that i wanted not native to html/css. So as you can see... it's very easy to detect if the text in the image gets blurry any one bit.

Everything is super clear and works fine on Chrome. However, the problem occurs after the page is done loading on IE or FF. All my images become blurry forever, even if they zoom back and forth etc. At the time, in my brain it made sense to put in larger than necessary pictures because it'll be more clear... but I guess I'm totally wrong. Hope some guru can have a solution to this soon. Thanks in advance!

Some Sample Code for Context:

            <div id="whiteBg">
            <img id="birdMain" src="Pictures/bird.png" alt="title"/>
            <img id="flowerMain1" src="Pictures/flower.png" alt="title"/>
            <img id="flowerMain2" src="Pictures/flower.png" alt="title"/>
            <img id="flowerMain3" src="Pictures/flower.png" alt="title"/>
            <img id="titleMain" src="Pictures/csaname.png" alt="title"/>
            <img id="csalogoMain" src="Pictures/csalogo.png" alt="asdf"/>
            </div>

I tried preloading the images in a desperate attempt to fix the solution, but that didn't do anything either. I don't even know if the preloading lines of code are working at all.

Preloading Code:

    var images = new Array("Pictures/1greatwall.jpg", "Pictures/2spring-scrolls.jpg", "Pictures/3lily.jpg", "Pictures/4heavy-snow.jpg", "Pictures/5sunrise.jpg", "Pictures/6crane.jpg", "Pictures/7winding-road.jpg", "Pictures/8guqin.jpg", "Pictures/9sealflower.jpg", "Pictures/10pine.jpg", "Pictures/11huangshan.jpg", "Pictures/12dragon.jpg", "Pictures/13otters.jpg", "Pictures/1greatwall.jpg", "Pictures/14emei.jpg");
var imgNumber = 1;
var numberOfImg = images.length;
if (document.images) {

//loads slideshow picures
var image1 = new Image();
image1.src = "Pictures/1greatwall.jpg";
var image2 = new Image();
image2.src = "Pictures/2spring-scrolls.jpg";
var image3 = new Image();
image3.src = "Pictures/3lily.jpg";
var image4 = new Image();
image4.src = "Pictures/4heavy-snow.jpg";
var image5 = new Image();
image5.src = "Pictures/5sunrise.jpg";
var image6 = new Image();
image6.src = "Pictures/6crane.jpg";
var image7 = new Image();
image7.src = "Pictures/7winding-road.jpg";
var image8 = new Image();
image8.src = "Pictures/8guqin.jpg";
var image9 = new Image();
image9.src = "Pictures/9sealflower.jpg";
var image10 = new Image();
image10.src = "Pictures/10pine.jpg";
var image11 = new Image();
image11.src = "Pictures/11huangshan.jpg";
var image12 = new Image();
image12.src = "Pictures/12dragon.jpg";
var image13 = new Image();
image13.src = "Pictures/13otters.jpg";
var image14 = new Image();
image14.src = "Pictures/14emei.jpg";

//loads other essential background pictures...
var image15 = new Image();
image15.src = "Pictures/csalogo.jpg";
var image16 = new Image();
image16.src = "Pictures/bird.jpg";
var image17 = new Image();
image17.src = "Pictures/flower.jpg";
var image18 = new Image();
image18.src = "Pictures/csaname.jpg";
var image19 = new Image();
image19.src = "Pictures/seemorename.jpg";
var image20 = new Image();
image20.src = "Pictures/seemore.jpg";
var image21 = new Image();
image21.src = "Pictures/leftarrow.jpg";
var image22 = new Image();
image22.src = "Pictures/slideshowbutton.jpg";
var image23 = new Image();
image23.src = "Pictures/rightarrow.jpg";
var image24 = new Image();
image24.src = "Pictures/logo.jpg";
var image25 = new Image();
image25.src = "Pictures/menu.jpg";
var image26 = new Image();
image26.src = "Pictures/csa.jpg";
}

NEW NOTES:

I found out that the refreshing of the images itself after resizing/zooming of the window will work automatically on Chrome, however, this is not the case in Firefox. Just tested. What is the root cause for this?

Answer 1

This issue should be fixed in the newer browser versions.