Periodic button background color change in 3.0.0

[cintaccs]

Bug report

Periodically I get this new behavior with the latest release:

Taskbar icon buttons:

Becomes:

The HTML originally inserted in DOM:
<button tabindex="1" id="button_profile" title="Your profile" class="material-icons mdc-top-app-bar__action-item">account_circle</button>

the HTML (after being init (new mdc.topAppBar.MDCTopAppBar(appBar);)) looks like this:
<button tabindex="1" id="button_profile" title="Your profile" class="material-icons mdc-top-app-bar__action-item mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" style="--mdc-ripple-fg-size:86px; --mdc-ripple-fg-scale:1.67351; --mdc-ripple-left:29px; --mdc-ripple-top:-29px;">account_circle</button>

I also have the issue that Checkbox hover - appears as a solid circle - but also periodically working???

Steps to reproduce

Reloading the document makes the error go away - and then after a few reloads - it is back again.

Actual behavior

This is new behavior with the latest release - it has worked consistently without issues since many versions ago.

Expected behavior

Consistent button appearance.

Screenshots

see above

Your Environment:

Chrome latest

Software	Version(s)
MDC Web	3.0.0
Browser	Chrome 75
Operating System	Win 10

Additional context

I still have the issue with BLACK hover over list items sometimes. (previously reported - but not consistently reproducable)

[moog16]

@cintaccs just to clarify this is specifically in the mdc-top-app-bar?

It looks like you're missing the mdc-icon-button class. Please see this glitch for correct usage. Please also see docs for correct html structure. Besides the MDCTopAppBar styles, you will also now need to import the mdc-icon-button styles:

@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/icon-button/mdc-icon-button";

Hope this helps!

[cintaccs]

@moog16 Thanks! That seems to help! (adding the additional mdc-icon-button to the element classes seems to solve it). The weird thing is that it worked every "second" time after reloading the page... anyway... thanks a lot for very quick reply and solution!! And sorry for not checking the HTML in the docs first! (FYI: I am using the minified version of CSS/js - not importing the individual components) - and yes it was specifically in the mdc-top-app-bar.

[moog16]

Yeah I also thought that was strange! My thinking is that the material styles didn't have enough time to be applied, but not sure what would make it look "correct".

And no worries :) Happy to help.