Wave effect on icon buttons overflows on the bottom left corner

[andreififiita]

When Clicking on a round component like icons with wave effect on, the bottom left corner is overflown by the wave. Sometimes this doesn't happen (when width and height is auto and parents have a certain display) Attached behavior screenshot: https://files.gitter.im/andreififiita/M8WN/Screenshot-2020-03-29-at-16.07.00.png

[kevzlou7979]

Can you share with me a simple source code for the properties you've used in the MaterialIcon

[andreififiita]

Something like this:

EMaterialIconButton embeddedSearchButton = new EMaterialIconButton(IconType.SEARCH);
embeddedSearchButton.setIconColor(Color.DEFAULT);
embeddedSearchButton.setWaves(WavesType.LIGHT);
embeddedSearchButton.setHideOn(HideOn.HIDE_ON_SMALL);

I have a custom object that extends MaterialIcon, and on construction i run this code inside EMaterialIconButton:

setWaves(WavesType.DEFAULT);

//my custom theme
Color normalTextColor = MaterialThemeLoader.getCurrentTheme().getNormalTextColor();
setIconColor(normalTextColor);

//custom css: sets padding: 6px; and grey background on hover - but it doesnt influence i think
addStyleName(EUIConstants.CSS_BACK_HOVERABLE);

setCircle(true);

Also, IconSize is not explicitly set. The icon is placed in a display:flex container. I cannot find where or why it works sometimes.

PS. I noticed these issues on other apps, that have nothing to do with gwt material (like google meet or hangouts) - probably because it is the same technique. And I am almost sure this didn't happen a few versions of chrome before (like 1 year ago).