This project is archived and is in readonly mode.

#179 ✓resolved

Fx.Scroll issue in Safari (mac and pc) with 1.2 release

Reported by gbot | June 30th, 2008 @ 03:15 PM

Hi, I think I may have discovered a bug in version 1.2 release, with Fx.Scroll on Safari.

I have a site which uses Fx.Scroll to scroll to different "pages", it all works fine in IE6/7, Opera 9.27/9.5, Firefox 2+.

But Safari 3, both Mac and PC the scroll just doesn't work. Although it's difficult to see in my example what is actually happening is that Safari always just scrolls to the top of the page everytime, rather than to the passed in element. (If you click and drag down the page, and then click an item on the left nav, you'll see what I mean)

See (this uses mootools 1.2 release)

What makes me suspect that this is a Mootools bug is that the (almost) identical script in version 1.2b2 works fine, so this has cropped up since then.

See (this version is using mootools 1.2b2)

If you look at the 2 above links with Safari you will see that using the left nav is broken in the 1.2 version. The only differences between the scripts is a couple of syntax changes from 1.2b2 to 1.2, to do with cookies and getSize();

1.2 uses, where 1.2b2 uses cookie.get/set

1.2 uses getSize() function, where 1.2b2 uses native functions because opera 9.27 had a problem with getSize() in 1.2b2.

However, something in my code is triggering the bug (if it is a bug), because when I tried to create a simpler, stripped down example to show the problem, I couldn't replicate it.

This works fine using Fx.Scroll (mootools 1.2 release) in Safari: http://gbot/scroll-test.html

I hope that's clear, please let me know if I can elaborate further.


Comments and changes to this ticket

  • Daniel

    Daniel July 3rd, 2008 @ 01:02 AM

    I think I'm seeing something similar here. Note that the Slacker web player is running a home grown framework, and the test I'm doing is adding Moo as a module to our framework...that part works just fine, but the test I'm using is to scroll a div. However, I'm using Fx.Morph (setting the CSS "top" property to move the div) to achieve the effect (trying to load as little of Moo as I have to for file size issues).

    My example works in every browser except Safari. However, I see a different net effect. The method appears to run, and the function I have chained to the effect does execute, and I see my page "change", but the "effect" does not happen...rather than appearing to slide in, it just flashes and the new page is there.

    I can't provide a URL because this is in our dev sandbox, but I can provide a code snippet. The "extra" properties setting bite seem to be required for me...and it may be due to the way the tree control is built (not with Moo). But, again...this works perfectly with every browser except Safari.

    // Set up the tree with Moo properties

    var mooMe = com.gui.moo.$(this.tree.tree);

    var mooH = mooMe.offsetHeight; = mooH+"px";

    // Set up our "page out" effect

    var outEffect = new com.gui.moo.Fx.Morph(mooMe, {duration:500, wait:false, transition: 'back:in' });

    var inEffect;

    // Change the direction of the effect depending which way we are paging.

    var last = mooH*-1*dir;

    // Set styles using Moo...why I have to do this I don't know

    mooMe.setStyles({'position': 'relative', 'top': 0,'height': mooH, 'opacity' : 100});

    // Page out..


    'top' : last,

    'opacity' : 0


    function () {

    // Now create the next page ,and "page in"

    ctrl.tree.rebuild(ctrl.tree.xml,false, start);

    mooMe = com.gui.moo.$(ctrl.tree.tree);

    inEffect = new com.gui.moo.Fx.Morph(mooMe, {duration:500, wait:false, transition: 'back:out' }); = "relative";

    mooMe.setStyles({'position': 'relative', 'top': last*-1, 'height': mooH, 'opacity' : 0});


    'top' : 0,

    'opacity' : 100




  • spef

    spef October 30th, 2008 @ 11:08 AM

    • Tag changed from 1.2, 1.2b2, fx.scroll, safari to fx.scroll, safari

    I have the same problem. Fx.Scroll works in FF, IE, Opera but fails on Safari when using Mootools 1.2 & 1.2.1. When reverting to version 1.2b2 there is no problem.

    And in my case the bug has also been triggered after changing some of my code. It worked on Safari before (or at least i'm pretty sure of that but some small doubt did arise now) but after changing some of my html (& css) it doesn't anymore. I'm sure that i didn't add or remove any javascript.

    I'll do some test when i find some time. But maybe somebody else discovered something on this already?

  • Aaron Newton

    Aaron Newton February 19th, 2009 @ 12:07 AM

    • Assigned user changed from “Valerio” to “Aaron Newton”
    • Milestone cleared.
  • csuwldcat

    csuwldcat May 20th, 2009 @ 07:47 AM

    100% confirmed, this bug directly correlates to certain CSS styles. If the container that has the element you want to scroll to has position:absolute on it, the script essentially fails to read the position of the element properly and scrolls to y = 0 instead, this is why is goes to the top. If you change your element container to be anything else it works as expected.

    • Daniel
  • fakedarren

    fakedarren February 8th, 2010 @ 06:15 PM

    • State changed from “new” to “open”
    • Assigned user changed from “Aaron Newton” to “fakedarren”

    Daniel, can you help me out and test this / provide a mooshell? given the age of the ticket and the number of tickets I have at the mo would love if you can confirm this is still an issue.

    If not it's on my list of to-check.....

  • Daniel

    Daniel February 8th, 2010 @ 07:06 PM

    I just checked this issue again with the Slacker Web Player and Safari 4.0.3. It appears that Apple has changed something because the effect now works.

  • fakedarren

    fakedarren February 8th, 2010 @ 07:10 PM

    • State changed from “open” to “resolved”

    I love being able to mark stuff as resolved :D

  • alexa

    alexa February 23rd, 2011 @ 10:01 AM

    • Milestone order changed from “0” to “0”


    I have a problem with Fx.Scroll in Safari and Chrome. The problem is the same, no matter what I do, the browser takes  y=0. Do you have any other idea besides the position?   Thank you :)

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins