Webkit calculating dimensions improperly

[simshaun]

First off, great work in this plugin.

I've found that there is a bug with the plugin in Webkit-based browsers such as Chrome and Safari.

When resize() is called, $img.width() and $img.height() return 0, resulting in improper dimensions calculations. It does this because Webkit sets the width and height to 0 and only after the image has been loaded does it calculate the correct values. What this means is the .load() event can be (and for me, usually is) fired before Webkit reports the correct dimensions - essentially a race condition.

Also, the load event may not be fired for cached images in some browsers (as described in the API).

So, here's what I've done to fix both issues:

1. Integrated the imagesLoaded plugin by @paulirish. This corrects the load event for cached images issue.
2. Set the image's width and height attributes using the dom element's width & height properties, which do contain the correct values. This fixes the Webkit problem because $img.width() and $img.height() will now return the correct values.

[jaysalvat]

Hi!
Thanks a lot for your contribution.

I didn't notice any problem with the resizing with webkit.
Can't reproduce the bug.

Same thing for the load event. Most (all?) of the bug are fixed by placing the .src settings after the event (what I did in the script). It works well on all the browser I tested it, Windows and MacOS).

Can you, please help me to reproduce the bugs ?

[simshaun]

Take a look at http://www.simshaun.com/dev/js/vegas/.

I've added a line to Vegas's resize method that logs the img width and height to the console.

The first time each image is loaded, it should give the correct dimensions. Every time you click the images and it loads them from cache, you should be getting 0,0.

[jaysalvat]

Thanks Shaun!

I tried different things on Chrome & Safari (pc) but I can't reproduce the bug.
I'm really sorry, I never get 0, 0

[simshaun]

Very odd. Mine is doing it consistently (100% of the time) on the cached images in Chrome. Safari seems to be fine though, go figure.

I'll also test this on Chrome when I get home tonight to verify that is not just this pc.

Made a short video showing it just so you can see it @ http://vimeo.com/24016972

[simshaun]

Verified that it is also occurring in Chrome on a second computer.

[jaysalvat]

I've just tried on Chrome/Mac at home.
No bug for me here too.
It must be something I don't understand.

Your video is not working. Too bad, it could help me a lot.

[simshaun]

Odd. Try the download link at the bottom right on vimeo.
On May 21, 2011 6:14 AM, "jaysalvat" <
reply@reply.github.com>
wrote:

I've just tried on Chrome/Mac at home.
No bug for me here too.
It must be something I don't understand.

Your video is not working. Too bad, it could help me a lot.

Reply to this email directly or view it on GitHub:
#2 (comment)

[jaysalvat]

Ok, I've downloaded the video.
I tried to reproduce the bug and no problem.
Here is mine. On Chrome 11 / Mac.
http://vimeo.com/24058494
Did I do right ?

What is the version of your Chrome ?

[simshaun]

Yep looks like you are doing the same thing as me. I'm running Chrome 11/Win7. Does it on Chrome 11/WinXP as well.

Well I honestly don't know what to try now. Now I'm just wondering if there are any differences in Chrome that would affect this between Windows and Mac.

Can you use the network tab of Chrome's dev tools to verify that it is not re-requesting the images the second time you click them?

[jaysalvat]

Hi,
I just looked at the network panel (Chrome 11.0.696.71 Mac)
The images are requested the first time only.

[simshaun]

I'm not sure what else to do to help you reproduce it. Perhaps Chrome for Mac is not affected.

Also, I just tested it on a 3rd computer (Vista) with a clean installation of Chrome and it does it there too.

[jaysalvat]

Hi Shaun,
Very weird.
No problem on all my machines Mac or PC and nobody's complaining about such a bug. I really don't understand.
I believe you but if I can't reproduce the bug, I can't work on it for the moment.
Thanks a lot for your help and feedbacks.

[jaysalvat]

Hi Shaun,

I finally manage to reproduce the bug. I used your solution (Paul Irish plugin) to fix it.
Thanks a lot.

Release 1.2