Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4617

portallayout, panel drag on touch issues

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Normal Normal
    • 9.5.1
    • Freshly, 9.5.0, 9.0.1.2, 9.1.0
    • Components
    • Security Level: Jimmy
    • None
      • iOS chrome/safari
      • android chrome
      • emulated touch device (chrome dev tools)
    • ZK 9.5.1 S1

      Steps to Reproduce

      drag a panel inside a portal layout on a touch device

      Current Result

      ios -> heavy vertical position flickering

      in chrome-devtools emulation -> JS errors

      [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
      stop @ zk.wpd:29947
      _docmousemove @ zk.wpd:17217
      _doEvt @ zk.wpd:29691
      delegateEventFunc @ zk.wpd:29701
      dispatch @ zk.wpd:5614
      elemData.handle @ zk.wpd:5418
      

      Expected Result

      no errors, no flickering

      when dragging an element suppress the default scroll position following the touch position

      Debug Information

      (this is unrelated to the jquery upgrade from 1.12 -> 3.5)

      the touch start event listener doesn't have the passive: false flag, so it can't preventDefault conflicting with the drag the scroll movement on iOS

      the passive: false flag cannot be set using the current jquery version (according to the FR below not before 4.0)
      https://github.com/jquery/jquery/issues/2871#issuecomment-215978040

      instead the native {{addEventListener('touchstart'), listener,

      {passive: false}

      }} function can be used before jquery supports it

      https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

      Workaround

      to avoid the heavy flickering on IOS
      lock scrolling during touchmove while zk.dragging is true

              document.addEventListener('touchmove', function(e) {
                  if(zk.dragging) {
                      event.preventDefault();
                  }
              }, {passive: false});
      
      

            Leon03 Leon03
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: