Work around safari touchevent listener bug

dfreedm commented 10 years ago

If touchevent listeners are added to a node from another document, then that node is added to the main document, the touch event listeners will not fire in iOS Safari 7.

Reproduction:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Safari broken touches</title>
    <style>
      #target {
        width: 100px;
        height: 100px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <div id="host"></div>

    <script>
      function log(e) {
        console.log(e.type);
      };

      var host = document.querySelector('#host');

      var template = document.implementation.createHTMLDocument();
      var target = template.createElement('div');
      target.id = 'target';

      // works
      //host.appendChild(target);

      target.addEventListener('touchstart', log);
      target.addEventListener('touchmove', log);
      target.addEventListener('touchend', log);

      // broken
      host.appendChild(target);
    </script>
  </body>
</html>

dfreedm commented 10 years ago

@sorvell @jmesserly @ajklein @rafaelw

jmesserly commented 10 years ago

the closest bug I could find was https://bugs.webkit.org/show_bug.cgi?id=105406, but i'm not sure it's related.

dfreedm commented 10 years ago

Horrible workarounds:

document.body.addEventListener('touchstart', function(){}) will trigger the broken node's event handlers, but removeEventListener will turn them back off again.
Use attachedCallback to remove and re-add touch listeners.

Both are pretty heinous, and would have to be triggered for iOS only.

sorvell commented 10 years ago

Let's go with #1 (Safari only) and file a bug.

On Tue, Aug 5, 2014 at 12:18 PM, Daniel Freedman notifications@github.com wrote:

Horrible workarounds:

document.body.addEventListener('touchstart', function(){}) will trigger the broken node's event handlers, but removeEventListener will turn them back off again.

Use attachedCallback to remove and re-add touch listeners.

Both are pretty heinous, and would have to be triggered for iOS only.

— Reply to this email directly or view it on GitHub https://github.com/Polymer/polymer-gestures/issues/33#issuecomment-51245787 .

dfreedm commented 10 years ago

Filed safari bug: https://bugs.webkit.org/show_bug.cgi?id=135628

@sorvell, Should I leave this open to track, or close with the workaround in place?

sorvell commented 10 years ago

open, I think.

On Tue, Aug 5, 2014 at 4:46 PM, Daniel Freedman notifications@github.com wrote:

Filed safari bug: https://bugs.webkit.org/show_bug.cgi?id=135628

@sorvell https://github.com/sorvell, Should I leave this open to track, or close with the workaround in place?

— Reply to this email directly or view it on GitHub https://github.com/Polymer/polymer-gestures/issues/33#issuecomment-51275891 .

googlearchive / polymer-gestures

Work around safari touchevent listener bug #33