PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

Ripple effect not showing properly (or at all) in Chrome (works in Firefox) #81

Closed nkrim closed 8 years ago

nkrim commented 8 years ago

Description

I've been trying to use paper-icon-button with just standard iron-icons for now, but the ripple effects aren't working. NOTE: This works in firefox for some reason (which is ironic since this is google and it tends to be, in my experience, that in FIREFOX is where things don't work as you expected them to).

Expected outcome

It should be simply that on mousedown, it would ripple out and hold until mouseup, wherein which it woul fade out.

Actual outcome

Most of the time, the ripple only shows up for what's supposed to be the fade-out on the upAction, but the down action causes no ripple to show, and on the rare chance the downAction does cause a ripple it doesn't hold the ripple if I hold the mouse down.

A weird thing I've noticed is, when the ripple does work for downAction, changing the element I'm inspecting in the chrome developer "elements" panel (neither the original nor the new one I clicked have to relate to the paper-icon-button) will allow it to work almost every time directly after this (still not fully work, just as much as it did before), but attempting the same thing by just clicking elements on the page doesn't produce this outcome.

All the appropriate attribute changes seem to take effect on clicks, and I've scoured the computed styles and I'm fairly certain that the color isn't just the same as the background and that there is no inherited styling that could be screwing it up, as I've removed almost all custom styling in order to debug this.

Steps to reproduce

Browsers Affected