Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

md-dialog-confirm hides confirm button before hovering in google chrome #2246

Open
vonBarbarosa opened this issue Jul 16, 2020 · 3 comments
Open

Comments

@vonBarbarosa
Copy link

vonBarbarosa commented Jul 16, 2020

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;
}
@webchiper
Copy link

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;
}

@kami4ka
Copy link

kami4ka commented Aug 13, 2020

Can it be somehow fixed inside the library itself?
Looks like the Chrome is the most popular browser.

@mikimoresi
Copy link
Contributor

mikimoresi commented Aug 18, 2020

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;
}

mikimoresi pushed a commit to mikimoresi/vue-material that referenced this issue Aug 18, 2020
mikimoresi pushed a commit to mikimoresi/vue-material that referenced this issue Aug 18, 2020
mikimoresi pushed a commit to mikimoresi/vue-material that referenced this issue Aug 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants