1007017 - Vimeo.com - On attempt to share a video, user is redirected to Facebook

Status: RESOLVED DUPLICATE of bug 966919

(Web Compatibility :: Site Reports, defect)

Description

[Teodora Vermesan (:TeoVermesan)]

Steps to reproduce:
1. Install vimeo panel (https://addons.mozilla.org/en-US/firefox/addon/vimeo-panel/)
2. From the vimeo panel tap on a video
3. Tap on the paper-plane icon to share the video
4. A pop-up "Share This Video" appears with the options: "share on facebook", "share on twitter" and "email link".

Actual results:
- After tapping the paper-plane icon, the user is redirected to the facebook share page with no possibility to choose another options from the pop-up to share.

Expected results:
- The user should be able to choose which option to share.
- Going to vimeo.com/m and trying to share a video though the icon works fine.

Comment 1

[Aaron Train [:aaronmt]]

No need for step (1,2)

Visit: http://vimeo.com/m/85002648, on share popup the page is redirected to Facebook

Comment 2

[Mike Taylor [:miketaylr]]

Reminds me of 966919.

So this is a little weird.

"touchstart" fires on <button tabindex="50" class="share-button rounded-box" aria-label="Share"> <svg class="share-icon" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid"><polygon class="fill" points="20,0 0,12 5,15 17,4 7,16 7,19 9,17 14,20"></polygon></svg> </button>

Which opens the ".mobile_lightbox" element with the share options. At that point, "click" is dispatched on <a href="http://m.facebook.com/sharer.php?u=http%3A%2F%2Fvimeo.com%2Fglaciar%2Fviennawaitsforyou&amp;t=Vienna%20waits%20for%20you" class="iconify_fb_b" style="padding:15px 10px">Share on Facebook</a>"

On a hunch, I tweak the CSS of the ".mobile_lightbox" so it's up a bit, and it clicks the Twitter option instead.

So now this really sounds like https://bugzilla.mozilla.org/show_bug.cgi?id=966919#c20. If they `return false` or `preventDefault` on the "touchstart" event, the bug is avoided... 

However, should it even be possible for the click event that follows touchstart to dispatch on another element that only happens to be at the same coordinates a split second later? That feels like a non-TE bug.

Comment 3

[Mike Taylor [:miketaylr]]

Hrm. Made a test case, but Chrome Mobile, Opera Mobile Classic, and Android stock are consistent with this firing a click event on the overlay element behavior... TIL: https://miketaylr.com/bzla/1007017.html.

So we're probably still dealing with something funky in attachClickHandler mentioned in https://bugzilla.mozilla.org/show_bug.cgi?id=966919#c17 (which is listening for "touchend" rather than "touchstart"). I guess it's time to actually figure out what's up with that.

Comment 4

[Mike Taylor [:miketaylr]]

Finally got this one figured out (I think).

Vimeo is using an event delegation library called Gator.js.

In Gator[1], if the event callback fn returns `false`, it will call Gator.cancel()[2] (which is `n.cancel` in player.js), which in turn calls e.preventDefault(). If you comment out this one line, we get the described "navigate to facebook" buggy behavior (which is better described as something like "ghost click dispatched on overlaid element with a click handler") in Chrome for Android and iOS 7 Safari.

So. The bug here and in 966919 appears to be: preventing the default action of a touchend event does not cancel the follow-up click. 

[1] https://github.com/ccampbell/gator/blob/master/gator.js#L234-L235
[2] https://github.com/ccampbell/gator/blob/master/gator.js#L50-L53

Comment 5

[Mike Taylor [:miketaylr]]

See https://miketaylr.com/bzla/1007017-2.html for a minimal test case (which doesn't rely on Gator.js) demonstrating the bug.

Comment 6

[Mike Taylor [:miketaylr]]

Given all that, going to close this as a dupe of 966919.