paper-icon-button not rippling when within condensing paper-scroll-header-panel

[nkrim]

Description

When a paper-scroll-header-panel does any actions towards condensing, it breaks the ripple effects of all paper-icon-buttons within it. My project is using the polymer-starter-kit as a boilerplate, and I can confirm that on my system, even throwing in a paper-icon-button into the polymer-starter-kit produces the same results.

Expected outcome

paper-icon-button expected to do proper ripple effect.

Actual outcome

paper-icon-buttons within a condensing paper-scroll-header-panel no longer ripple properly after the scroll-header-panel has done any condensing as triggered by a scroll action (this is not caused by the polymer-starter-kit's custom condensing function in app.js, as I commented that out and it still did not work). paper-icon-buttons in fixed/non-condensing paper-scroll-header-panels (like the drawer of the starter kit) do not break when their panel scrolls, which leads me to believe that it is the condensing action itself.

Steps to reproduce

1. Get the starter kit
2. add paper-icon-buttons around the place, especially within scroll header panels (you may want to do some inline styling or change app-theme to try and make the ripple as noticeable as possible)
3. add paper-icon-button import to elements.html
4. gulp vulcanize and gulp serve to serve the starter kit with edits
5. test paper-icon-button before and after scrolling each panel

   Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[nkrim]

Update: It is not the condensing behavior itself I don't think, as I changed the main scroll-header-panel to fixed and now it is always broken, even before scrolling. Maybe it has to do with the main section of the paper-drawer-panel then? Also let me know if this is better suited for, say, the polymer-starter-kit issue page

[nkrim]

Update: I've removed the drawer and the buttons now ripple, so it must be an issue with the drawer (although at this rate it could juke me again and I'll think it's something else).

[nkrim]

Is there an easier way to inspect what's going on in the paper-ripple element, because I can't seem to get to what's inside the "waves" element, and it's hard to navigate and understand what's going on by using breakpoints in the debugger. I feel like if I can understand what's not working about the ripple in the first place it will be much easier to figure out what's causing it.

[nkrim]

Update: I've found the source of the disappearance of the ripple (but not necessarily the cause). For some reason, as soon as the .wave div for a paper-ripple in a paper-icon-button in the main section of a paper-drawer-panel receives any transform css property that affects it's Z value (so any translateZ, scaleZ, or scale3d [<- what is applied to the div]) it mysteriously just disappears, even when the change should be unnoticeable (scaleZ(1) or translateZ(0px)). So I don't know why it happens but at least I know (part of) what is causing it not to work.

[nkrim]

Update: Interestingly if I remove any of these style values/properties:

• translate3d(0px, 0px, 0px)
• overflow: hidden
• border-radius: 50%

from the .wave-container parent, the scale3d() transform now works on the .wave child, though in all of these cases it is unbounded (not consistent with .circle for the paper-ripple).

By the way this is all done while at a breakpoint just after setting the values of the wave.

If I put a background on the .wave-container I can see it, but also interestingly if I set any opacity that is less than 1, it will disappear completely, even 0.99. This same effect occurs at the paper-ripple level, which has the value opacity: 0.6 and if that is removed or set to 1 then everything appears, but if it's set to anything else nothing will show.

[nkrim]

Update: given what I found in the last comment, I removed the .circle class inherent to the paper-ripple in the paper-icon-button and the ripple did show. Now I'm just wondering what combination of these attributes within that specific (and very far away) parent element and pertaining to the one scroll motion causes this all to fall apart.

[nkrim]

What's interesting is even after finding all of this I can still do the "click something in developer console" trick to get it to show a little bit (the ripple starts but fades out very quickly). So maybe some event being triggered by the drawer-panel or something else is causing the ripple effect to cancel, or the down event to stop very soon after it starts. The drawer-panel handler triggers after the paper-icon-button handler so this would be possible.

[nkrim]

This could have something to do with the iron-selector in the drawer-panel, since I'm not in narrow view with the drawer and so in order to deselect then select again I need to click out of the panel (like into the dev console) and then back in to see the effect.

[nkrim]

Update: In narrow mode all ripple effects work.

[nkrim]

Update: Ripple's always work if the main content section of the drawer panel is a div instead of a paper-scroll-header-panel. So it is the evil mix of a paper-icon-button inside a paper-scroll-header-panel that's the main section of a non-narrow paper-drawer-panel that is causing this.

[nkrim]

Update: So when the drawer is hidden it has transform(-100%), I've found that when, from normal non-narrow view, just setting transform(-100%) makes the paper-icons show, somehow. They even start to show as soon as transform(85%), but not all of them.

[nkrim]

I've just noticed that by "working" I mean that they show the circle, but it doesn't ripple or transition persay, so I'm just going to leave it off for here because I've been searching for a solution when I thought things were working fuly in some cases, but turns out they actually weren't. I know I have a lot of comments here and I should probably collate them, but let me know if I should move this issue elsewhere, but I just feel like it's a very strange behavior that should be addressed, especially since it prevents use of two fairly common elements in google's own browser (it works in firefox for some reason).

[Sevenish]

I can confirm this problem exists. The behaviour is very strange. I'm not sure if it is the drawer though. In some cases the ripple works for one click after resizing the window (even with the drawer still visible).

[cecilia-sanare]

I get incredibly inconsistent behavior with paper-icon-button's ripple as well.

Live Demo

Firstly, for some reason having the content in an iframe fixes the issue which is why you don't notice it on jsbin or plnkr examples. So in order to reproduce it you have to look at their respective output pages.

Output Page

Various other things like the instances listed in the demo cause it to get fixed as well.

This issue also doesn't seem to plague paper-button or paper-icon-button-light.

edit: updated jsbin links