Fit/Reset has unexpected results in Chrome/Safari

[hostifynetworks]

Fit doesn't appear to work properly in Chrome and Safari. The original aspect ratio of the image is destroyed and the image then fully fills the div. I have verified that this also happens on the example version. Everything else seems to work as expected.

[benlumley]

Hello

Thanks for reporting.

Any chance of a bit more info? I can't replicate it in latest safari/chrome on mac. Are you on mac? Or windows?

And when you say it happens in the example, is that un-modified, same images etc as in the repo?

And I'm guessing you haven't set aspect to false in the config?

Thanks

Ben

[hostifynetworks]

Thanks for the response. Here are some more details. My initial issue stated that the problem occurred in ALL images. After further testing I have determined that to be false (oops). I've narrowed it down to a few specific things.

With Chrome on Windows, the Adblock plugins caused it to not resize properly (has to be completely disabled...specifically: https://chrome.google.com/webstore/detail/gighmmpiobklfepjocnamgkkbiglidom and https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb ...haven't tried with any other variants). I'm not sure about Safari. I guess that's more of a problem with the Adblock rules, however. I'll just have to hope that folks don't use Adblock unless you have a workaround.

The other problem I had was pulling images through a PHP script. After playing with it for a few days, adding these two lines seemed to fix the problem:
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
I'm not sure if that points to a problem with my webserver or with the browsers.

On another note, the example (http://benlumley.co.uk/dev/panzoom/example/index.html) works in Safari on Mac now. However it seems to be mildly inconsistent. For example, one time the image loaded at full size and wouldn't go back to normal until the cache was cleared and the browser restarted. Perhaps I have stumbled onto a Webkit bug.

By the way, thanks for the great script! :)

[semanticart]

I've found that the loadTargetDimensions function works erratically in chrome (probably other webkit browsers as well). The issue seems to be that height and width of #jqpz-temp are zero. The heights and widths don't seem to be calculable at the time the function is trying to get them.

I haven't found a good solution for it but was able to hack my way around it by dynamically adding a style tag to the head of my document with the (previously known) heights and widths that #jqpz-temp should be. Lame, but it works :/

[goblox]

I've noticed the same issue. I can reproduce the error in the sample viewer using the original images by clicking destroy -> re-initialize -> Fit/Reset. The image will then expand to the dimensions of the div and ignore the original aspect ratio.

The interesting thing is that whatever means the demo image switcher uses to initialize an image is working. The image switches immediately and retains the (incorrect) dimensions of the previous image, but then after a brief pause, it's updated to the correct ratio.

[benlumley]

OK - I'll try and find time to take a look. It's not going to be within the couple of weeks though, so no breath holding! :)

On Monday, 4 February 2013 at 19:22, goblox wrote:

I've noticed the same issue. I can reproduce the error in the sample viewer using the original images by clicking destroy -> re-initialize -> Fit/Reset. The image will then expand to the dimensions of the div and ignore the original aspect ratio.
The interesting thing is that whatever means the demo image switcher uses to initialize an image is working. The image switches immediately and retains the (incorrect) dimensions of the previous image, but then after a brief pause, it's updated to the correct ratio.

—
Reply to this email directly or view it on GitHub (#3 (comment)).

[CraigWarford]

I added lines to my local copy of loadTargetDimensions as follows, seems to clear up the issue:
data.target_dimensions.x = $('#jqpz-temp').width();
data.target_dimensions.y = $('#jqpz-temp').height();
if (data.target_dimensions.x == 0) {
data.target_dimensions.x = this[0].naturalWidth;
}
if (data.target_dimensions.y == 0) {
data.target_dimensions.y = this[0].naturalHeight;
}
$('#jqpz-temp').remove();

The first two lines are existing, and work with older browsers, while the use of naturalWidth/naturalHeight work with newer ones quite nicely. You might want to improve the usage for your code base, I just did it this way for clarity.

[benlumley]

Thank you for sharing :)

On Monday, 1 April 2013 at 21:52, CraigWarford wrote:

I added lines to my local copy of loadTargetDimensions as follows, seems to clear up the issue:
data.target_dimensions.x = $('#jqpz-temp').width();
data.target_dimensions.y = $('#jqpz-temp').height();
if (data.target_dimensions.x == 0) {
data.target_dimensions.x = this[0].naturalWidth;
}
if (data.target_dimensions.y == 0) {
data.target_dimensions.y = this[0].naturalHeight;
}
$('#jqpz-temp').remove();
The first two lines are existing, and work with older browsers, while the use of naturalWidth/naturalHeight work with newer ones quite nicely. You might want to improve the usage for your code base, I just did it this way for clarity.

—
Reply to this email directly or view it on GitHub (#3 (comment)).