material-components-web
material-components-web copied to clipboard
fix(ripple): eliminate double ripple effect on iOS
This PR fix the issue that ripple effect is activated twice on iOS when zoom in page. see issue details: #4293
When tap a ripple surface on iOS Safari/Chrome below events are fired sequentially:
- pointerdown (activate ripple)
- touchstart (skipped)
- pointerup (deactivate ripple)
- mousedown (activate ripple again)
To solve this issue, we could find a solution to prevent mousedown after pointerup, but I had a doubt that why we had to handle mousedown event. There might be some sort of history, such as pointerdown was not supported on major browsers, but I couldn't figure out the actual reason (since this project was migrated from material-design-lite and there are no history remains about this) and, at this time, it looks like mousedown can be replaced with pointerdown.
Therefore, I removed mousedown/mouseup from ACTIVATION/DEACTIVATION event types and it worked well on various devices, including:
- Safari / Chrome on iOS (13.1.3)
- Safari / Chrome on macOS (10.15.1)
- Chrome on Android (9)
- Edge / Chrome on Windows 10
Codecov Report
:exclamation: No coverage uploaded for pull request base (
master@a5dbd8a). Click here to learn what that means. The diff coverage is100%.
@@ Coverage Diff @@
## master #5305 +/- ##
=========================================
Coverage ? 98.91%
=========================================
Files ? 122
Lines ? 6000
Branches ? 772
=========================================
Hits ? 5935
Misses ? 64
Partials ? 1
| Impacted Files | Coverage Δ | |
|---|---|---|
| packages/mdc-ripple/foundation.ts | 100% <100%> (ø) |
Continue to review full report at Codecov.
Legend - Click here to learn more
Δ = absolute <relative> (impact),ø = not affected,? = missing dataPowered by Codecov. Last update a5dbd8a...6076298. Read the comment docs.
can we solve PR?