material-design-lite
material-design-lite copied to clipboard
google
Ripple effect breaks buttons on iOS 13
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.
I can confirm that. The same problem I have in an app with the WebView component on iOS 13.
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.
Having the same issue. Reported this issue on WebKit BugZilla. Seems others are having related issues.
@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.
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.
@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)
@chriscorns Yeah that is it. I pretty much had to remove all places I was using the ripple effect.
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.
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.
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.
hi @tom-kaltofen , I already test your workaround, buttons work but styles for tabs and buttons got damaged.
@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?
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
@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 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
@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!
@jscadden I am experiencing a related issue in our hybrid native app. Only on certain
:activepsuedo-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)