0

I have recreated the material design ripple effect in jQuery, and it works great in IE11 and Chrome 46, but on Firefox 39, if i apply the effect to links, it prevents the redirection. I have managed to find out that the function that breaks my code is the jQuery.appendTo() function.

Fiddle: http://codepen.io/grekomp/pen/pjpzKQ

As you can see, when you click on the link in Chrome it works, but Firefox only runs the js and ignores the link.

Any idea how to fix it? I would like to use some cross-browser compatible solution.

Grzegorz Palian
  • 300
  • 2
  • 9

3 Answers3

1

The problem is because you're using the mousedown event and not the click event... so FF is not firing both events (unlike chrome and IE) and only firing the mousedown event so your solution (tested on FF v31):

$('.ripple').on('mousedown', rippleEffect );

Edit: since mousedown has to work, its a bug in FF maybe that only click or mousedown has to fire at once. so its a little inelegant but replicates the solution that you're asking for...

Add this to the end of your mousedown handler 

 this.click();

or even better, from SO mentioned on another answer (Mousedown and Click conflict on Firefox) no race events will happen with this one:

a.ripple { pointer-events: none; }

Community
  • 1
  • 1
Daemedeor
  • 1,013
  • 10
  • 22
  • That doesn't really solve the issue, as I want the function to work on mousedown, to give instant visual feedback to the user. – Grzegorz Palian Oct 19 '15 at 22:48
  • personally though, i don't know why even bother with a ripple because target="_blank" runs so fast and makes it the active tab that the user would barely even be able to see the actual animation – Daemedeor Oct 19 '15 at 22:58
  • Normal links don't work on codepen, so I added `target="_blank"` to illustrate the issue – Grzegorz Palian Oct 19 '15 at 23:00
  • fair enough, I don't use codepen a whole lot for js stuff – Daemedeor Oct 19 '15 at 23:04
  • This is not the solution to my problem, as i do not want to trigger a click event on mousedown. It changes the default link behavior – Grzegorz Palian Oct 19 '15 at 23:07
1

if you don't add the $overlay div then the link works as expected, and you get most of the visual affect. I'm not sure why, but adding that div breaks the link - and only on Firefox.

I suggest you open a bug for the Firefox devs, maybe they can help you with a better workaround.

Edit: Found a solution!

Add pointer-events: none; css to both your .ripple-effect and .ripple-overlay divs.

Iftah
  • 9,512
  • 2
  • 33
  • 45
0

Switch from this to $(this) to apply JQuery to the object:

$("a").on("mousedown", function() {
    var p = $(this);
    var div = $('<div/>');
    div.text("Hello");
    div.appendTo(p);
});

$("a").click(function() {
    $(this).css("color", "green");
});

Tested in FF 41 on Windows. http://codepen.io/anon/pen/xwpGNw

In your new code, I found:

$overlay.addClass('ripple-overlay')
    .css({
    background: $(this).data("ripple-color")
})
    .appendTo($(this));;

Removing the extra semicolon will not make much a different, yet that was hit on JSHint. I even moved the same code to a jsfiddle to test too: http://jsfiddle.net/Twisty/p4fvjvtf/ I forked your pen with the minor change, and still works: http://codepen.io/anon/pen/xwpwOE

Maybe I am missing what is not working.

EDIT

Based on the comments, it looks like adding pointer-events: none; to the CSS for the created DIV resolved the issue.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Still not working for me, besides, the pen is just an example, my full code doesn't look exactly the same – Grzegorz Palian Oct 19 '15 at 21:56
  • The pen is working for me. Are you sure you want to use `appendTo()` and not `appendAfter()`? You want to add the `DIV` inside your `A`? – Twisty Oct 19 '15 at 21:58
  • Works for me in FF, I get the ripple affect clicking any place in the green box. I did find a few things that need to be cleaned up. Will edit my answer in a moment. – Twisty Oct 19 '15 at 22:22
  • The ripple effect works on all tested browsers, but the green box is a link and it should open google in a new tab. On Firefox this doesn't happen – Grzegorz Palian Oct 19 '15 at 22:47
  • 1
    I see now. And found: http://stackoverflow.com/questions/27352128/mousedown-and-click-conflict-on-firefox ? – Twisty Oct 19 '15 at 22:57