google / google/material-design-lite

Ripple effect breaks buttons on iOS 13

Open
#5,281 18 comments 9 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

## 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:
```







Works only sometimes


Works every time

```
[plunker](https://embed.plnkr.co/ZfAxLwzNDYSbRrDqLgsE/)
[mobile friendly punker](https://run.plnkr.co/wbIfZThcImEEEOFN/)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.