search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.28k stars 5.04k forks source link

Ripple effect breaks buttons on iOS 13 #5281

Open HannesHentzschel opened 4 years ago

HannesHentzschel commented 4 years ago

Bug

iOS 13 was released 2 days ago. Here is an issue that I found, which did not happen with the previous iOS version.

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

1.3.0

What browser(s) is this bug affecting (including version)?

Safari (most current version)

What OS (and version) are you using?

iOS 13

What are the steps to reproduce the bug?

Try it with the following html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    </head>
    <body>

        <button onclick="alert('click')" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent mdl-button--raised">
                Works only sometimes
        </button>
        <button onclick="alert('click')" class="mdl-button mdl-button--accent mdl-button--raised">
                Works every time
        </button>
    </body>
</html>

plunker mobile friendly punker

What is the expected behavior?

The alert for "onclick" should always trigger when I tap the button.

What is the actual behavior?

When using the classes mdl-js-button mdl-js-ripple-effect the onclick does not trigger reliably.

Any other information you believe would be useful?

Once the click on the ripple button worked, repeated clicks will also work. You need to click somewhere else to reproduce the problem again. It seems this problem gets more prominent, when the page where the button is used is more resource intensive. In my app it takes like 5-10 taps to trigger the button.

chriscorns commented 4 years ago

I can confirm that. The same problem I have in an app with the WebView component on iOS 13.

Garbee commented 4 years ago

I understand you're seeing a problem in an existing application after testing on the latest iOS release. MDL is no longer maintained. Please update your systems as you can to Material Components for Web.

Since this was seemingly working in all previous versions of iOS, it would appear that this is a bug introduced by a change in WebKit. That should probably be reported to them so they can triage if they broke something unexpectedly.

Thank you.

et-nat1995 commented 4 years ago

Having the same issue. Reported this issue on WebKit BugZilla. Seems others are having related issues.

jscadden commented 4 years ago

@et-nat1995 Can you post a link to the issue you reported on WebKit BugZilla. If anyone finds a workaround, please post it. I would think this iOS issue would affect more than just mdl, but I'm having a hard time finding others talking about the issue.

chriscorns commented 4 years ago

I think this is the bug report: https://bugs.webkit.org/show_bug.cgi?id=202802 My workaround is to remove the ripple module incl. JavaScript (which cause the bug) in my project and to replace the ripple effect with a custom css inspired by https://codepen.io/finnhvman/pen/jLXKJw.

aanich-assf commented 4 years ago

@jscadden I am experiencing a related issue in our hybrid native app. Only on certain :active psuedo-classes do I experience the onclick handlers having inconsistent behavior. I'm using React, however, and nothing related to material-design-lite (so this is likely a WebKit bug)

et-nat1995 commented 4 years ago

@chriscorns Yeah that is it. I pretty much had to remove all places I was using the ripple effect.

lockstockd commented 4 years ago

Experiencing this issue too. Thanks @chriscorns for the codepen, looks good enough. I've just removed the ripple module to get around this issue for now but a solution would be great.

klemensz commented 4 years ago

Same issue here. Im removing all mdl-js-ripple-effect now as a workaround... Checkboxes and radio-buttons don't seem to be affected, only mdl-buttons.

tom-kaltofen commented 4 years ago

For my OpenHAB installation, I have developed a work-around for this problem, which is coming from the "mdl-ripple" style. In this style there are two entries (among others)

.mdl-ripple { background: #000; opacity: 0; }

which iOS 13 doesn't like. However, if you reverse the two, there is no visual difference (opacity of 0% and transparent background are actually both transparent), but the buttons work again on iOS 13:

.mdl-ripple { background: transparent; opacity: 1; }

Maybe this is also helpful for others using MDL.

iojancode commented 4 years ago

hi @tom-kaltofen , I already test your workaround, buttons work but styles for tabs and buttons got damaged.

Screen Shot 2019-11-13 at 8 07 35 PM

tom-kaltofen commented 4 years ago

@iojancode That's strange, in OpenHAB there is no visual difference (in iOS and also on Windows). Maybe OpenHAB is using MDL in a different way. How does it look if you use a very small value for opacity and don't change the background, e.g.

.mdl-ripple { background: #000; opacity: 0.001; }

or even a smaller value?

charlesr1971 commented 4 years ago

I can confirm this happens on:

http://www.mushroom-man.com/signup

This only started to happen when I upgraded my iPhone 8+ from iOS 12.x to iOS 13.x

charlesr1971 commented 4 years ago

@iojancode How does it look if you use a very small value for opacity and don't change the background

You sir, are a genius!

This worked for me...

iojancode commented 4 years ago

@iojancode That's strange, in OpenHAB there is no visual difference (in iOS and also on Windows). Maybe OpenHAB is using MDL in a different way. How does it look if you use a very small value for opacity and don't change the background, e.g.

.mdl-ripple { background: #000; opacity: 0.001; }

or even a smaller value?

Now it works!!! thank you

jlsanchezfr commented 4 years ago

@iojancode That's strange, in OpenHAB there is no visual difference (in iOS and also on Windows). Maybe OpenHAB is using MDL in a different way. How does it look if you use a very small value for opacity and don't change the background, e.g.

.mdl-ripple { background: #000; opacity: 0.001; }

or even a smaller value?

Genius! this worked for me, thank you!

KarthikeyanUTH commented 1 year ago

What is these links used for.

KarthikeyanUTH commented 1 year ago

@jscadden I am experiencing a related issue in our hybrid native app. Only on certain :active psuedo-classes do I experience the onclick handlers having inconsistent behavior. I'm using React, however, and nothing related to material-design-lite (so this is likely a WebKit bug)