Possible timing issue with css variables used by mdc-ripple

[deap82]

What MDC-Web Version are you using?

0.18.1

The issue

I've ran into some issue with the Ripple effects (on mdc-tab elements, but might be general). I noticed that the effect looked odd and by some simple inspection I saw that the Ripple pseudo elements did not expand outside the boundaries of the tab the same way they do in the demo page.

After some more investigation I realized that the problem seems to be that the css variables --mdc-ripple-fg-scale, --mdc-ripple-fg-translate-start and --mdc-ripple-fg-translate-end are calculated wrong. I thought it was due to some timing issue and I've been able to verify that if I use my own css bundle (compilation of material components web + custom css) and load it into a simple html page and use the mdc-tab-bar there the ripples are ok, but when I use them inside an actual view in my complete webapp (a SPA where the html is loaded through ajax) I get the issue. So then I tried to delay the call to mdc.autoInit, just to see if it actually was a timing issue, but delaying it as much as five seconds doesn't make any difference.

What happens is that both psudeo elements sort of align exactly with the size of the tab, so I can clearly see one oval shape and one circle shape being animated within the tab.

I understand that this bug report is not as complete as it should be and I'm happy to investigate more, but if someone could give some insight as to when these css variables are calculated and set and what they are based on I think it would nudge me in the right direction. Or if there is some way to force a recalculation of the variables, that would also be of interest.

[kfranqueiro]

Thanks for the report.

Initially, could you confirm whether you also experience this with version 0.19.0? This sounds like it might be a duplicate of #1184 which was a regression specifically in 0.18.1; we cut a new release last Friday to resolve it.

If it is still reproducible in 0.19.0, it'd be very helpful if you could supply a CodePen that reproduces the issue.

To answer your questions, ripples are first laid out when they are constructed in the case of the out-of-the-box ripple component; in the case of autoInit, they'll be laid out as soon as it is called. You can call the layout function on each ripple component instance to force recalculation. The out-of-the-box ripple component also registers a handler on window.resize to call layout on each instance, so resizing the browser viewport should also force recalculation.

[deap82]

OK, yes this is a duplicate and 0.19.0 solved it... And this is obviously why I couldn't recreate the issue in a codepen, wich I also thought was on 0.18.1 :-D :-/.

So is there any way to get notified about new releases? 0.18.1 came so recently it never even occured for me to check for a new version. And I did search for other "ripple" issues but I realize now I only searched open issues... (#facepalm). I check the changelog and/or "npm outdated" from time to time... But being notified would probably be better.

On a side note; resizing the window did not recalculate the size of the pseudo elements back in 0.18.1.

[kfranqueiro]

No worries; we had a couple of spur-of-the-moment releases last week to address regressions that couldn't wait, which is why 0.19.0 probably caught you off-guard. Typically there's a minor release once every 2 weeks.

I can think of a few options off the top of my head in terms of release notifications:

• Watch the repo (using the Watch button on GitHub), though this will also generate notifications on all issues/PRs
• Subscribe to the release feed that GitHub generates
• Use something like greenkeeper to file issues on your own repo when dependencies have updates available

Meanwhile, regarding your observation about window resize on 0.18.1, resize events still called layout in that version (example), but there was a regression in the layout calculation itself.