material-design-lite: 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.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 9
Comments: 18

Most upvoted comments

@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?

+10

tom-kaltofen on Nov 14, 2019

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.

chriscorns on Oct 17, 2019

@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.

jscadden on Oct 16, 2019

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.

Garbee on Sep 23, 2019