bug: IonRefresher infinite loading state on iOS when remounting inline svgs

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When using the IonRefresher and IonRefresherContent together on iOS, along with an <svg> that has a <use> element, this causes the refresher to infinitely stay in the “pulling” state even after the pulling gesture is completed if the svg is remounted.

https://user-images.githubusercontent.com/41892498/161946632-a3fdae46-f79f-4be1-9021-99c746a49ae3.mov

Expected Behavior

The refresher moves to the next state after pulling gesture is finished.

Steps to Reproduce

1. Build and run the app on an iOS simulator
2. Press and hold on the <use> element of the svg, then
3. Pull down and hold until the svg has been remounted
4. The refresher infinitely stays in the pulling state

Code Reproduction URL

https://github.com/james2hey/ionic-refresh-svg-issue

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/jamestoohey/.nvm/versions/node/v12.20.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.0.14

Capacitor:

Capacitor CLI : 3.4.3 @capacitor/android : not installed @capacitor/core : 3.4.3 @capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4 native-run : 1.5.0

System:

NodeJS : v12.20.0 (/Users/jamestoohey/.nvm/versions/node/v12.20.0/bin/node) npm : 6.14.8 OS : macOS Monterey

Additional Information

No response

[james2hey]

Thanks for looking into this. Yes the issue does go away when setting pointer-events: none on the SVG.

[liamdebeasi]

Thanks! I was able to determine the root cause of this issue.

Ionic has a gesture utility that fires onStart and onEnd callbacks. We use onStart to detect when a user has begun pulling to refresh and use onEnd to detect when a user has finished pulling to refresh.

In the case of your application, starting the gesture on the SVG element causes the onEnd callback to not fire.

The onEnd callback is hooked up to touchend and touchcancel listeners. Neither event was firing on the SVG which resulted in the pull to refresh gesture getting “stuck” because the onEnd callback never fired.

---

I created a simple reproduction outside of Ionic to verify this behavior: https://codepen.io/liamdebeasi/pen/YzYBqbG

It appears that touchend is not fired on an SVG after it is removed from the DOM (even if it is re-added). However, touchend is fired on a non-SVG element after it is removed from the DOM. The blue rectangle in the CodePen is a non-SVG element.

It seems that this is the intended behavior as it is consistent across multiple browsers. Does the issue go away if you set pointer-events: none on your SVG?