material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

fix(ripple): eliminate double ripple effect on iOS

Open peterminhk opened this issue 5 years ago • 3 comments
trafficstars

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

peterminhk avatar Dec 04 '19 14:12 peterminhk

Codecov Report

:exclamation: No coverage uploaded for pull request base (master@a5dbd8a). Click here to learn what that means. The diff coverage is 100%.

Impacted file tree graph

@@            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 data Powered by Codecov. Last update a5dbd8a...6076298. Read the comment docs.

codecov-io avatar Dec 04 '19 14:12 codecov-io

can we solve PR?

anlexN avatar Jul 10 '22 03:07 anlexN