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.

Sign up for GitHub

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

Jump to bottom

Ripple effect breaks buttons on iOS 13 #5281

Open
HannesHentzschel opened this issue Sep 21, 2019 · 18 comments
Open

Ripple effect breaks buttons on iOS 13 #5281

HannesHentzschel opened this issue Sep 21, 2019 · 18 comments

Comments

@HannesHentzschel
Copy link

HannesHentzschel commented Sep 21, 2019 •
edited
Loading

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
Copy link

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

@Garbee
Copy link
Collaborator

Garbee commented Sep 23, 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.

@et-nat1995
Copy link

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

@jscadden
Copy link

@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
Copy link

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
Copy link

@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
Copy link

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

@lockstockd
Copy link

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
Copy link

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.

@SabineMa SabineMa mentioned this issue Oct 29, 2019
Open
@SteKoe SteKoe mentioned this issue Nov 7, 2019
Closed
@tom-kaltofen
Copy link

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
Copy link

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
Copy link

@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
Copy link

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
Copy link

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

@theodab theodab mentioned this issue Feb 4, 2020
Closed
@iojancode
Copy link

@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
Copy link

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

@jhuleatt jhuleatt mentioned this issue Jun 15, 2021
Open
@gunnarmein-ts gunnarmein-ts mentioned this issue Jan 1, 2023
Closed
@KarthikeyanUTH
Copy link

What is these links used for.

@KarthikeyanUTH
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests