Waypoints not working in Firefox (newest version)

[dusset]

Hello, I am using this code with your waypoints plugin to trigger jquery function when element gets in viewport. It works fine in Safari, Chrome but for some reason I cant get it to work in newest version of Firefox. Any idea what the problem could be and how to fix it?

Code:

$(document).ready(function() {
  $('#drop').waypoint(function() {
    $(this).addClass('animation');
  }, { triggerOnce: true, offset: 'bottom-in-view' });
});

Thanks

[imakewebthings]

Cannot tell you with just that code alone. What do you mean by "does not work". Your class is not added? Is it added in the wrong place? An example of the bug would be best.

[dusset]

Basically it should add the .animation class which triggers CSS3 animation:

#drop.animation {
  -webkit-animation: drop 1s ease-in;
  animation: drop 1s ease-in;
}

keyframes drop 
{
  0% { width:5px; height:5px; opacity:0 }
  70% { opacity:1;  }
  100% { width:30px; height:30px; border-radius:60px; -moz-border-radius:60px; opacity:0; margin:-15px 0 0 -15px; }
}

But it doesn't do anything. I tried simply changing the background-color without any animations to make sure the problem isnt in the animation, but it didnt work either. So it seems like the class isnt added at all.

[imakewebthings]

So it seems like the class isn't added at all.

You can use Firebug to inspect the DOM and see whether the class is added or not, no need to guess.

I don't know if the CSS you pasted here is meant to be a literal copy of the CSS on your site, but keyframes drop is not the right syntax for the animation keyframe definition. You need an @ before keyframes. Again, the easiest way by far is if you can just show me the site you're trying to debug. Trying to convey our thoughts in English may work in the end but can be dreadfully slow.

[imakewebthings]

@dusset Closing this until you can provide an example.

[skycodr]

What happens is when the way point direction is down it works fine on all browsers but when the direction is up way points doesn't get triggered in Firefox

The following example is used on a nav menu. When user scrolls nav items get highlighted on FF but when scrolling up this does not get triggered.

$(".main-pages div" ).waypoint(function(direction){
    var page = $(this),
    pagetitle = page.attr("id");
    activelink.attr("data-select", false); // previous link
    activelink = $(".main-menu ul li a[data-nav='" + pagetitle + "']"); // new link
    activelink.attr("data-select", true);
});

I have also added smooth scrolling to the page.
```Javascript
$(function() {
        $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1800);
                    return false;
            }
        }
    });
});