Centering on load with Safari

[GoogleCodeExporter]

Hi,

Safari seems very eager to trigger that it has loaded an image before it
actually has, resulting in that the centering almost never works on the
first slide. What I get when I load the slideshow is the top left corner of
the image in the middle. This seems to only happen with the latest safari
and on slideshow load. If I go forth and back in the slidwshow the images
get centered :)

Thanks!

Original issue reported on code.google.com by m...@theglide.com on 26 Jul 2008 at 9:51

[GoogleCodeExporter]

I think this might be related to this ticket here:

http://mootools.lighthouseapp.com/projects/2706/tickets/78-element-events-domrea
dy-should-use-domcontentloaded-with-webkit-525

I will probably wait until this is fixed in the framework.

Original comment by aeron.gl...@gmail.com on 26 Jul 2008 at 7:46

• Changed state: Accepted

[GoogleCodeExporter]

I've been trying to fix the centering issue. In the center function it thinks 
the first slide image is 28px when it's 
actually 600px.

Not fully tested but Changing 'domready' to 'load' seems to have made 
everything work in Safari 3 and Firefox 3. 
There may be downsides to doing this?

I'm having other problems in IE6 unrelated to this, so haven't tested the 
change there yet.

Original comment by spac...@gmail.com on 27 Jul 2008 at 1:10

[GoogleCodeExporter]

Where did you change the domready?

Thanks

Original comment by m...@theglide.com on 28 Jul 2008 at 11:56

[GoogleCodeExporter]

Looks like they moved the ticket to 1.3 release, so I guess we won't see a 
mootools
fix in a while :(

Original comment by m...@theglide.com on 28 Jul 2008 at 12:05

[GoogleCodeExporter]

Right at the start of your include change:

"window.addEvent('domready', function(){"
to
"window.addEvent('load', function(){"

Since I did this the first image is never misaligned. No side effects noticed 
so far.

Original comment by spac...@gmail.com on 28 Jul 2008 at 10:04

[GoogleCodeExporter]

I jumped the gun a bit.. the above fix makes it center ok in Safari 3 but not 
Firefox 3 (only not correct on 
refresh).

Original comment by spac...@gmail.com on 29 Jul 2008 at 11:05

[GoogleCodeExporter]

Are you loading your pics dynamically?
I don't start my slideshow with an event and as I load the images dynamically on
slideshow creation the fix needs to be in the slideshow code or mootools core.

Original comment by m...@theglide.com on 29 Jul 2008 at 2:35

[GoogleCodeExporter]

I'm generating the JS data var with PHP. The output is basically the same as 
the demo site.

Got an idea how to fix this but it involves changes to the slideshow code. May 
have a look at the weekend.

Ben

Original comment by spac...@gmail.com on 29 Jul 2008 at 11:39

[GoogleCodeExporter]

Seems to be taking a long time for the mootools team to fix this one. Is there 
any
possible workaround?

Original comment by m...@theglide.com on 8 Sep 2008 at 11:42

[GoogleCodeExporter]

I have applied the fix to my Mootools core that was submitted to the Mootools 
dev
version. I can confirm that the update does NOT fix this issue with safari.
Must be something else causing this :(

Original comment by oceanic...@gmail.com on 13 Oct 2008 at 4:26

[GoogleCodeExporter]

Mootools 1.2.1 does not fix this issue.

Original comment by oceanic...@gmail.com on 17 Oct 2008 at 2:42

[GoogleCodeExporter]

Do you have a link where I could see this happening?

Original comment by aeron.gl...@gmail.com on 19 Oct 2008 at 6:53

[GoogleCodeExporter]

You can try this one: http://www.zaplife.com/viewchannel.php?id=222
Click on any photo in the channel. Sometimes centering works sometimes it 
doesn't.

Original comment by m...@theglide.com on 19 Oct 2008 at 6:58

[GoogleCodeExporter]

Any idea on how this can be solved or what is causing this?

Thanks!

Original comment by m...@theglide.com on 5 Nov 2008 at 10:07

[GoogleCodeExporter]

I have updated to the latest Mootools 1.2.1 and r113 without any success.
This issue has to be a timing issue as on my localhost I do not get this 
problem.
Could it be that when the _center function tries to get the size from 
this.image its
getting the previous photos dimensions? On about 80% of the times I open the
slideshow loading an image it says that x and y is 0.

As there are more and more using Safari it would be great to solve this problem.

Original comment by m...@theglide.com on 9 Nov 2008 at 2:09

[GoogleCodeExporter]

I was able to duplicate this once, so I set up a test page to see if I could 
fix it -
however I have not been able to duplicate it since. If you are able to get the 
error
to appear in Safari, please send me the console results:

http://www.electricprism.com/aeron/slideshow/test/

Original comment by aeron.gl...@gmail.com on 11 Nov 2008 at 11:25

[GoogleCodeExporter]

I tested your page and it seems to work there.

These are my results so far. As its a timing issue Safari's cache makes a 
difference.
I can always replicate the problem on Zaplife if I relaunch safari and empty 
the cache.
Have you tried with larger images? Maybe the ones you are using load to fast?
The only temporary fix I have been able to do so far is that when the size of
this.image is 0 I remove the centering code. This way my users can at least 
view the
photo.

I appreciate your help. I haven't been able to figure this one out. It's 
sounding
more like an issue with Safari itself? With my previous slideshow I had a 
similar
issue. Safari reported the image being loaded before it actually had loaded it.

Original comment by m...@theglide.com on 11 Nov 2008 at 11:38

[GoogleCodeExporter]

If you can recreate the problem on zaplife, perhaps you can add the
following code to your copy of slideshow, in the _center function,
after:

var size = img.getSize();

Add:

console.log('sX: ' + size.x + ', sY: ' + size.y);
console.log('w: ' + img.width + ', h: ' + img.height);
console.log('oW: ' + img.offsetWidth + ', oH: ' + img.offsetHeight);
console.log('nW: ' + img.naturalWidth + ', nH: ' + img.naturalHeight);
console.log('cW: ' + img.clientWidth + ', cH: ' + img.clientHeight);

Then send me the results when you are able to recreate the problem. Thanks!

Original comment by aeron.gl...@gmail.com on 12 Nov 2008 at 11:21

[GoogleCodeExporter]

I added the code. You can try it your self if you want.

Here are the results:

sX: 0, sY: 0
http://www.zaplife.com/viewchannel.php?id=222
w: 0, h: 0
http://www.zaplife.com/viewchannel.php?id=222
oW: 0, oH: 0
http://www.zaplife.com/viewchannel.php?id=222
nW: 0, nH: 0
http://www.zaplife.com/viewchannel.php?id=222
cW: 0, cH: 0
http://www.zaplife.com/viewchannel.php?id=222

Original comment by m...@theglide.com on 12 Nov 2008 at 1:18

[GoogleCodeExporter]

What about changing line 370 to:

if (this.preloader.retrieve('loaded') && this.preloader.offsetWidth && $time() >
this.delay && $time() > this.transition){

Original comment by aeron.gl...@gmail.com on 13 Nov 2008 at 11:42

[GoogleCodeExporter]

I tried that line of code. The slideshow stopped working and didn't load any 
pics in
either browser :( It just loaded the thumbs and then stopped.

Original comment by m...@theglide.com on 4 Dec 2008 at 4:35

[GoogleCodeExporter]

Testing the slideshow with MT 1.2.2 and Safari 3.0.4 I am no longer able to 
duplicate
this issue - is this still happening?

Original comment by aeron.gl...@gmail.com on 9 May 2009 at 4:44

[GoogleCodeExporter]

That is good news. I will upgrade to 1.2.2 test it and get back to you.
Thanks!

Original comment by m...@theglide.com on 20 May 2009 at 10:57

[GoogleCodeExporter]

This worked for me (in Safari 4.0.2):

I changed the line
        if (this.preloader.retrieve('loaded') && $time() > this.delay && $time() > this.transition){
to
        if (this.preloader.retrieve('loaded') && this.preloader.get('width') && $time() > this.delay && $time() > 
this.transition){

and
            this._center(this.image);
to
            this._center(this.image,this.preloader.get('width'),this.preloader.get('height'));

and replaced the _center() function with
    _center: function(img,w,h){
        if (this.options.center){
            img.set('styles', {'left': (w - this.width) / -2, 'top': (h - this.height) / -2});
        }
    },

As far as I can see there are no side-effects in other browsers.

Original comment by jonathan...@googlemail.com on 2 Aug 2009 at 4:58

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com on 21 Aug 2009 at 7:48

[GoogleCodeExporter]

thank you jonathan! 

  this change fixed the problem, its working. i tested ff 3.5, ie 6-7-8.

Original comment by erkance...@gmail.com on 31 Dec 2009 at 10:36

[GoogleCodeExporter]

Bonjour,

- sur IE 7, cela ne marche pas, l'image n'est pas recadrée !!! elle déborde 
du cadre.
- sur Opera 10.10, les images ne prennent pas tout le cadre, il y a du blanc 
(arrière
plant) quand l'image bouge !!!

Que faire, merci par avance de votre aide si précieuse !

www.lezarts-creation.com/index.php

Original comment by ouradou....@gmail.com on 15 Jan 2010 at 8:24

[GoogleCodeExporter]

Changes are applied, but the img's width and height (as opposed to preloader) 
is used.

Original comment by gregory....@gmail.com on 7 Jul 2010 at 10:12

• Changed state: Fixed

[GoogleCodeExporter]

hampshiresatgreenbrier.net/
My slideshow is skewed in Google. What can I do to fix the position as it looks 
in IE? Help!

Original comment by harg...@gmail.com on 15 May 2013 at 6:31