Skip to main content

Bug Tracker

Side navigation

#8043 closed bug (worksforme)

Opened January 24, 2011 11:35PM UTC

Closed January 28, 2011 01:15PM UTC

Filter function does not fire on all items in AppleWebKit

Reported by: Owned by:
Priority: low Milestone:
Component: dimensions Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:

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.

Attachments (0)
Change History (3)

Changed January 24, 2011 11:57PM UTC by jitter comment:1

_comment0: Try using \ {{{ \ $(window).load( resizing function ); \ $(document).ready( alltheotherstuff ); \ }}} \ \ for WebKit browsers. It's known that WebKit fires document.ready but not all image sizes might be available yet. \ \ Please report back if that works for you.1295913876180830
component: unfileddimensions
owner: →
priority: undecidedlow
status: newpending

Try using

$(window).load( resizing function );
$(document).ready( alltheotherstuff );

for compatibility with WebKit browsers on image manipulation. It's known that WebKit fires document.ready but not all image sizes might be available yet.

Please report back if that works for you.

Changed January 25, 2011 04:48PM UTC by anonymous comment:2

Tried the change above and it seems to work. One thing I did notice when testing this is that in non-Webkit Browsers (IE, Firefox, Opera), ALL image sizes also may not be available when ready() fires (I have over 50 images on the page that it is checking). It is better than webkit browsers but still not perfect.

As a fix, I am firing the resizing function in the .ready() event to catch the images that do have size available and running again in .load() to catch those that haven't resized yet that need to be resized.

Changed January 28, 2011 01:15PM UTC by jitter comment:3

resolution: → worksforme
status: pendingclosed

As the suggested solution works for the reporter I'm closing this ticket.