Material-ui: [TouchRipple] Ripple effect on Firefox

[dcardin]

I am using Firefox 45 on Linux, and the demo app at http://www.material-ui.com/#/customization/themes (version 0.14.4) shows that the ripple effect works well for everything but the buttons.

That includes the Tab headers, which I suspect are buttons as well.

The problem is present with alphas for 0.15 as well

[mbrookes]

Confirmed no ripple on buttons in Firefox 45 on OS X.

[nathanmarks]

@mbrookes crazy! we should get this fixed for the release...

[tintin1343]

I tried taking a look at this..apparently the TouchRipple/ CircleRipple component is hidden. I gave it a zIndex of 10000 to see if I can see anything. I was not able to. will have to dig deeper into it.

[nathanmarks]

@tintin1343 barking up the wrong tree, this is event/button/spec related. I've looked into it -- i'll handle from here if you want?

[newoga]

Short story: we decided to move this to 0.16.0 release in an effort to get 0.15.0 out the door sooner. This is not a regression introduced by the work on 0.15.0 (it's broken in older versions). This issue is only present in Firefox because Mozilla follows the spec for <button /> more strictly than other browsers. Fixing this properly while maintaining good semantic DOM will require some rearchitecture of t button and underlying button components.

[l0gicgate]

Lest we forget @newoga that you guys put block elements inside inline elements everywhere in the framework. This is why there are so many cross compatibility issues. Using properly styled inline elements would solve a lot of those problems. May one ask who made those decisions? And what is the purpose of using a button tag instead of a div if you're going to break DOM semantics in the first place?

[newoga]

May one ask who made those decisions?

@l0gicgate Absolutely, you may! You could also look through the extensive git history yourself, or, even better, find more productive ways to help contribute to this project and make it better like opening up a PR in areas you don't like. 😄

[l0gicgate]

@newoga duly noted.

[cgestes]

@l0gicgate I dont think it was a choice, it just happened. Maintainers are always willing to clean the codebase and to improve it. Switching to flex at the same time would also be welcome.

[nathanmarks]

@l0gicgate Cleaning up incorrect use of elements, following semantics, and switching to flexbox are some changes that we're starting to implement and will be implementing more of in coming releases -- it bugs us just as much as you, trust me 😄

[piotr-dobrogost]

@newoga

This issue is only present in Firefox because Mozilla follows the spec for more strictly than other browsers.

Could you please elaborate? Knowing the reason for this bug would help come up with a fix or at least some workaround.

[nathanmarks]

This is resolved in next.

[binarykitchen]

been investigating this and can confirm that the touch ripple effect styles on enhanced buttons can cause list items to disappear.

when i remove position: absolute at https://github.com/callemall/material-ui/blob/master/src/internal/TouchRipple.js#L202 then all works fine on firefox (ofc the animation is behaving differently then)

[binarykitchen]

@nathanmarks the fact that this ticket is closed makes me wonder in which commit for next this has been resolved?

[binarykitchen]

i think adding two new css properties to the touch ripple might do the trick

        "backface-visibility": 'hidden', <------ NEW
        "perspective": 1000, <------ NEW

they enable hardware acceleration and then the flicker on firefox is gone

[binarykitchen]

on the other hand, these two new css props will depend on gpu which isn't so nice. turns out that will-change: "transform" turns out to be a better solution ...

[mr-e-]

Was this fixed? I am running 0.16.7 and I am still not seeing the ripple in Firefox.

[mbrookes]

@mr-e- This is fixed in the next branch where we are working on a drains-up rewrite. It is still some way from release.

[Galti]

I'm using 0.17.4 and there is nor ripple.

[AkyunaAkish]

Any updates on this? Still seeing the issue on 0.18.7

[dcardin]

Indeed, 0.19 with FF 55.0.1 is still not working.

[cobisimo]

Anyone still having this issue, should reset dom.w3c_touch_events.enabled and dom.w3c_touch_events.expose values in about:config to default values. It looks like it was set to wrong default in past FF versions.