PointerEvents not initializing properly for SVG elements with 0.2.0+

[bergie]

It seems PointerEvents are badly broken in 0.2.1. When I load noflo-ui with the new Polymer & platform release, none of the pointer events or gestures are working.

Now, in JavaScript console I do:

document.addEventListener('pointerdown', function (event) { console.log('pointerdown', event.target); });
document.addEventListener('trackstart', function (event) { console.log('trackstart', event.target); });

I try dragging in the graph editor, and nothing happens. No console output.

However, once I add this:

document.addEventListener('touchstart', function (event) { console.log('touchstart', event.target); });

everything starts working properly.

[bergie]

I'm assuming it comes from some subtle timing issue related to this commit:

DOMContentLoaded, which was used in earlier PointerEvents fires earlier than readystatechange complete.

[bergie]

Might have to do with React doing its own work at DOMContentLoaded

[bergie]

Update: seems due to Polymer/polymer#440 we had been using Polymer 0.2.0 with Platform 0.1.4. This bug has appeared between 0.1.4 and 0.2.0

[bergie]

I'm starting to be convinced that the issue is with fdf80d6 (#124)

Confirmed: this bug only happens with SVG.

[dfreedm]

The real issue is Polymer/ShadowDOM#394

[dfreedm]

I think this is actually a safari bug, which I used the same workaround for in googlearchive/polymer-gestures#33

[dfreedm]

Reopening for future interested parties.

[msegado]

@azakus / @scottgonzalez, would including the Safari bug workaround described at googlearchive/polymer-gestures#33 be within the scope of the pep.js project? I could probably help with a PR if so...

Possible approaches:

1. Always add the fix on iOS Safari until https://bugs.webkit.org/show_bug.cgi?id=135628 is resolved
2. Only add the fix when SVG elements are detected (if always having an extra touchstart on document.body is undesirable)
3. Just wait until it's fixed in Safari and add a note to the Readme =)

[msegado]

A quick update for anyone experiencing the same issue: it looks like events are correctly dispatched when touching elements within the SVG, just not the SVG element itself. Adding a transparent rectangle with 100% width and height allows touches to generate events which bubble up and can then be caught on the SVG.

[patrickhlauke]

PEP has now entered emeritus status at the OpenJS Foundation. This repository is now archived.