I have .NET DataList that can show over 50 images at a time and have a one line statement that loads in the page $(document).ready() that is to resize all images on the page with a class of "photo" that are greater that 100px in height to be 100px in height. The statement is:

$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

The problem is that in any browser that uses the AppleWebKit (Chrome, Safari, iPad) not all the images that are to be resized get resized and it is random (though usually the first 4 or 5 do and the remainder do not). Remarkably, Mozilla (Firefox and Opera) and IE 6/7/8/9 work correctly.

I have put in tracing statements and some of the images that are not being resized initially report as 0px in height. If I put in a 1 second delay using setTimeout() for these browsers, the page loads correctly.

if ($.browser.webkit) {

setTimeout('$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");', 1000);

}

else { // This works fine on IE6/7/8/9, Firefox and Opera

$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

}

As a corporate app, I am stuck right now using 1.4.2 on our production site, but I have done testing on my local machine using 1.4.4 and get the same results.