HELP!!! Touch Devices Pinch/Spread & Swipe/Scroll Problem

[jdhadwin]

I put this pen together for touch devices, but code pen on touch is a bit tough.  Explanation in the pen.

I can't figure out why touch doesn't work as expected over the SVG. I'd appreciate any enlightenment. Especially when the SVG takes up the whole screen, it even becomes impossible to scroll away from the SVG.  Gestures are also broken over the SVG for reasons I can't understand, especially since the scale is reporting during the event. Below the chart/SVG you'll see a readout of the gesturechange event's event.scale property, as it changes.  So it's working, but it's not working.

 

If you pinch/spread over anything except the SVG it works.  Maybe I'm just burned out, but I can't launch my web app over this, because people can get stuck on the SVG if it lands at full screen in landscape orientation.

 

Ideas?

 

See the Pen MWRbQwd?editors=1010 by jdhadwin (@jdhadwin) on CodePen

[jdhadwin]

@GreenSock The use of the Draggable plugin is appending the

style="touch-action: pan-y;"

 attribute to the svg itself.  This is what is causing the behavior I don't want, but I don't know how to fix it.

 

Any ideas how I can prevent the Draggable from adding this to the entire SVG?

[jdhadwin]

Temporary work around is that I can do

gsap.set('#forecast', {touchAction:'manipulation'}); //target the SVG element and force manipulation

immediately after instantiating any Draggable, but if I'm reading the Draggable code right, (line1767):
 

Quote

Some browsers like Internet Explorer will fire a pointercancel event when the user attempts to drag when touchAction is "manipulate" because it's perceived as a pan. If the element has scrollable content in only one direction, we should use pan-x or pan-y accordingly so that the pointercancel doesn't prevent dragging.

ie is ancient history (at least in my mind) but I don't know whether this still matters.

@GreenSock If you were me, how would you handle this.  I just need my SVG to be able to be pinched/spread zoomed in/out, and for scrolling to be able to continue if the SVG becomes full screen... which wasn't possible when Draggable was assigning pan-y or pan-x.

[GreenSock]

If that gives you the result you want, that's totally fine. I don't think it'd be good to make that the default behavior in Draggable because of the other potential side effects, but if your solution works for your project, fantastic, do that. 👍