Images are distorted in Safari 5.0.4 via HTTP, fine locally.

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Download Slideshow2r199.zip
2. Unzip and view index.html locally
3. Unzip and view index.html via Apache server over HTTP

What is the expected output? What do you see instead?

I expect to see two identical slideshows, but curiously the browser pointed at 
the HTTP server is distorting the second and fourth images, that is, they are 
being scaled and/or cropped incorrectly.

What version of the product are you using? On what operating system and
browser?

I'm running Mac OS X 10.6.7. This doesn't happen on MSIE in Vmware/Windows XP. 
This doesn't happen on Firefox. This doesn't even happen on Safari 5.0.3 on the 
other Mac. It only happens on Safari 5.0.4. It is repeatable.

Please provide any additional information below.

Here is a screenshot of this oddness: 
http://dl.dropbox.com/u/404650/permanent/Slideshow2_safari_504_bug.png

Also, clicking on the thumbnail jumps to and renders the large photo just fine. 
But if the slideshow plays through the photos on it's own, this problem occurs.

Original issue reported on code.google.com by jason%he...@gtempaccount.com on 12 Apr 2011 at 7:19

Attachments:

• Slideshow2_safari_504_bug.png

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This does seem to be related to 
http://groups.google.com/group/mootools-slideshow/browse_thread/thread/166b03461
c0bc349, with the exception that I see the issue with resize:fill, which is the 
default.

Jason Hendriks / Hendriks IT Solutions Ltd.
Senior Application Architect, Senior J2EE Developer and Information Architect
 facebook.com/jasonhendriks

Original comment by jason%he...@gtempaccount.com on 12 Apr 2011 at 12:20

[GoogleCodeExporter]

Does this problem still occur with the 1.3.1 version of Slideshow?

http://code.google.com/p/slideshow/downloads/detail?name=Slideshow-1.3.1.zip

Original comment by aeron.gl...@gmail.com on 12 Apr 2011 at 1:16

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com on 12 Apr 2011 at 1:16

[GoogleCodeExporter]

Yes, the problem occurs in v1.3.1 of Slideshow with Safari 5.0.4 over http:// 
for all slideshows except KenBurns.

The problem does not occur for
- Safari 5.0.4 via file://
- Safari 5.0.3 over http://
- when transitioning after clicking on a thumbnail

Original comment by jason%he...@gtempaccount.com on 12 Apr 2011 at 2:27

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hello, I reported a similar issue (also linked already in these comments):
http://groups.google.com/group/mootools-slideshow/browse_thread/thread/166b03461
c0bc349
However, I am unsure if it's the same problem because I am able reproduce it 
locally as well as http.

For my issue, it seems like the problem is due to this.image.getSize().y and 
this.image.getSize().x reporting incorrectly, which results in a distorted 
image upon resize.  Therefore, my workaround was to hack the _resize method to 
use the width and height of the image *source*, instead of using the dimensions 
of this.image.  Then I let it go ahead and apply the resize that it calculated 
to this.image as usual.  This is just a hack to workaround the problem, and may 
not be a correct solution... but I hope it helps in finding a resolution.  Let 
me know if you'd like to see my hack.

Original comment by carol...@gmail.com on 12 Apr 2011 at 7:05

[GoogleCodeExporter]

Here is the weirdness in numbers. Starting at image 3, 'width' and 'height' are 
set to the meta for image 1 and from then on are always two slides out of sync:

.../Slideshow%202!/images/1.jpg : 720x540
.../Slideshow%202!/images/2.jpg : 446x640
.../Slideshow%202!/images/3.jpg : 720x540
.../Slideshow%202!/images/4.jpg : 446x640
.../Slideshow%202!/images/1.jpg : 777x582
.../Slideshow%202!/images/2.jpg : 800x600
.../Slideshow%202!/images/3.jpg : 720x540
.../Slideshow%202!/images/4.jpg : 446x640

It appears the problem starts in the _preload function:

            ['src', 'height', 'width'].each(function(prop){
                this.image.set(prop, this.preloader.get(prop));
            }, this);

Even if image.width and image.height are hardcoded..

            this.image.width = '50px';
            this.image.height = '50px';

.. the new attributes do NOT appear in the debugger for this.image, even though 
the image does appear in the browser as a 50x50 square.

As pointed in this post 
(http://www.sitepoint.com/forums/javascript-15/mootools-dynamic-image-getsize-58
7663.html), getSize() "does not actually look at the image file, it looks at 
the image element". So probably updating image.width and image.height in the 
code above means nothing to the _resize function. And since the *image element* 
width and height (and the alt tag for that matter, which was a big clue) is 
carried over from the this.a/this.b temporaries, this explains why it becomes 
two images out of sync.

Carol's fix is the correct one, though I did it by explictly passing width and 
height to this._resize:

  _preload:
            this._resize(this.image, this.preloader.get('width'), this.preloader.get('height'));

    _resize: function(img, w, h){
        if (this.options.resize){
            dh = this.height / h, dw = this.width / w;
      ...

Original comment by jason%he...@gtempaccount.com on 15 Apr 2011 at 9:13

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

My solution is very similar haha!!  Main differences are two things:
1) I used .get('src') instead of .get('width') and .get('height'), then grabbed 
the width and height from the source instead.  Your use seems cleaner since you 
don't have to create a new image variable like I did.
2) I originally used this.preloader as well.  However, with the latest 
Slideshow1.3.1 (or maybe it was when I was testing in IE) I sometimes got 
errors, so I recently changed it to this.image.get('src') instead of 
this.image.get('src').  This works as well.  

Here is my code.  Original code is commented out.
//this._resize(this.image);
var newImg = new Image();
newImg.src = this.image.get('src');
var tmpHeight = newImg.height;
var tmpWidth = newImg.width;

this._resize(this.image, tmpWidth, tmpHeight);

... 

_resize: function(img, tw, th){
//_resize: function(img){
      // var size = img.getSize(),
      //    h = size.y, w = size.x,
      //    dh = this.height / h, dw = this.width / w;
    var size = {x:tw, y:th},
        h = size.y, w = size.x,
        dh = this.height / h, dw = this.width / w;
...

Of note, this is based on the Slideshow1.3.1, while Jason's code is for the 
MT1.2 version.  It's basically the same thing except the if 
(this.options.resize) check was moved out of the resize function -- that's why 
it is missing from mine.

Original comment by carol...@gmail.com on 15 Apr 2011 at 10:02

[GoogleCodeExporter]

I downloaded Slideshow 1.3.1 and can confirm your fix works great!

Original comment by jason%he...@gtempaccount.com on 15 Apr 2011 at 11:40

[GoogleCodeExporter]

I'll get this and the other fixes into a new build asap. Thanks a lot for both 
your help with this!

Original comment by aeron.gl...@gmail.com on 15 Apr 2011 at 11:54

• Changed state: Accepted

[GoogleCodeExporter]

Cool!  Jason's fix may be cleaner, since you don't have to create a new image 
variable like I did.  Just note that I got an error with this.preloader when I 
originally used it (maybe it was in IE, I don't remember the details of the 
error).  So if his fix works with this.image instead, I'd go with his!

Original comment by carol...@gmail.com on 16 Apr 2011 at 12:09

[GoogleCodeExporter]

.. of course why it works in some browsers and doesn't in others is still a 
mystery! i'd say browser bug if it was just safari... but firefox too? maybe a 
mootools problem.

Original comment by jason%he...@gtempaccount.com on 16 Apr 2011 at 5:16

[GoogleCodeExporter]

Should be fixed in Github now, will get the new build out this weekend.

Original comment by aeron.gl...@gmail.com on 16 Apr 2011 at 3:02

• Changed state: Fixed

[GoogleCodeExporter]

Confirmed fixed in Slideshow-1.3.1.110417

Original comment by jason%he...@gtempaccount.com on 18 Apr 2011 at 2:01

Attachments:

• [Screen shot 2011-04-18 at 10.00.06 .png](https://storage.googleapis.com/google-code-attachments/slideshow/issue-172/comment-19/Screen shot 2011-04-18 at 10.00.06 .png)