md-dialog-confirm hides confirm button before hovering in google chrome #2246
Description
When using the md-dialog-confirm component, the confirm button is invisible until mouse hover. After the hover, button is kept visible.
It happens only in Google Chrome latest version.
Steps to reproduce
I entered the official Vue Material website, on the Dialog - Confirms section, try the example. https://vuematerial.io/components/dialog
Which browser?
Latest vue material (vue-material v1.0.0-beta-14)
Latest Google Chrome (84.0.4147.89 64 bits) - The bug didn't reproduce in an earlier version of the browser I had today in the morning.
What is expected?
To see the text in the confirmation button.
What is actually happening?
The button and its text is completely invisible until the mouse is hovered upon it.
Reproduction Link
Official md-dialog-confirm codesandbox: https://codesandbox.io/s/jvw8pv4z85
My workaround solution
I noticed, testing in the Google Chrome console, that if I removed either the border-radius: 2px or the overflow: hidden lines, the button appears normally. Removing some other css statements made the button appear, but putting them back in didn't make the button invisible again.
I made the following workaround on my base css code. I don't know if it's the best option, but it seems very specific to me to not impact other components:
.md-dialog-container .md-dialog-actions .md-button{
overflow: inherit;
}