md-dialog-confirm hides confirm button before hovering in google chrome
vonBarbarosa opened this issue · 3 comments
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;
}
With the latest google chrome update, buttons are not shown in all dialog boxes.
Hot fix today:
.md-button{
overflow: visible;
}
or
.md-ripple {
position: unset;
}
Can it be somehow fixed inside the library itself?
Looks like the Chrome is the most popular browser.
I have added the fix in this pull request #2254
The pull request include a new feature for dialogs to be able to target a specific element, not only the document body.
Till it will not be fixed in the library my workaround is a bad not scoped
.md-dialog .md-dialog-actions {
backface-visibility: hidden;
}