Bug Tracker

Opened 6 years ago

Closed 6 years ago

#8043 closed bug (worksforme)

Filter function does not fire on all items in AppleWebKit

Reported by: leomrozek@… Owned by: leomrozek@…
Priority: low Milestone: 1.next
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.

Change History (3)

comment:1 Changed 6 years ago by jitter

  • Component changed from unfiled to dimensions
  • Owner set to leomrozek@…
  • Priority changed from undecided to low
  • Status changed from new to pending

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.

Last edited 6 years ago by jitter (previous) (diff)

comment:2 Changed 6 years ago by anonymous

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.

comment:3 Changed 6 years ago by jitter

  • Resolution set to worksforme
  • Status changed from pending to closed

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

Note: See TracTickets for help on using tickets.