Duplicated 'dblclick' and phantom 'touchstart' events with Chrome >= 55 #5180

Open
juanmaneo opened this Issue Dec 9, 2016 · 28 comments

Projects

None yet
@juanmaneo

Starting with chrome 55.0.2883.75 'dblclick' is fired twice

It may be related to issue #4127

Example from issue #4127 is showing the problem
http://playground-leaflet.rhcloud.com/coh/edit?html,console,output

On Firefox 50.0.2, Safari 10.0.1, Opera 41.0.2353.69, Chromium 53.0.2785.143,
You get expected behavior:
"map click!"
"map click!"
"map double click!"
"body double click!"

While with chrome 55.0.2883.75 you get:
"map double click!"
"body double click!"
"map click!"
"map double click!"
"body double click!"

And Chrome in beta 56.0.2924.21 you get:
"map click!"
"map double click!"
"body double click!"
"map click!"
"map double click!"
"body double click!"

I still have a test machine on Chrome 54 and it has expected behavior.

@IvanSanchez
Member

What's your platform? OS? Desktop or phone? Do you have a touchscreen?

I remember #4127, and before fixing this bug I'd like to know exactly which browsers/environments display this bug.

@IvanSanchez IvanSanchez added this to the 1.0.3 milestone Dec 9, 2016
@IvanSanchez
Member
IvanSanchez commented Dec 9, 2016 edited

Apparently Chrome 55 has implemented PointerEvents, thus changing the way that the dblclicks are being dispatched. Quote from https://blog.chromium.org/2016/10/chrome-55-beta-input-handling.html :

As usage of the mobile web grows, it is increasingly important for sites to react well to touch input. Historically, this meant handling MouseEvent and TouchEvent separately, which can be difficult to maintain. Chrome now enables unified input handling by dispatching PointerEvents. PointerEvents lead to more responsive pages, as they don’t block scrolling by default. To achieve the same performance with TouchEvent, pages can use passive event listeners.

It should be possible to detect this behaviour with a combination of L.Browser.chrome and L.Browser.pointer.

@juanmaneo
juanmaneo commented Dec 9, 2016 edited

Thanks for your quick answer.

I have tested on desktops, Ubuntu 16.04 and macOS 10.12.1 for now, not using touchscreen.

@richardhinkamp
richardhinkamp commented Dec 9, 2016 edited

Maybe related, I have a problem with PointerEvent in Chrome (55.0.2883.75, Linux no touchscreen). A click triggers PointerEvent with pointerType: "mouse". This is handled as a "touchstart" event in Leaflet. I listen to touchstart, mousedown and mouseup and with a click the touchstart fires first and then the mousedown + mouseup. Double events fire for a single event.

I guess the problem is using PointerEvent and MouseEvent+TouchEvent together. When using PointerEvent the traditional events are obsolete?

@IvanSanchez IvanSanchez changed the title from map 'dblclick' event fired twice with new version of chrome starting with 55.0.2883.75 to Duplicated 'dblclick' and phantom 'touchstart' events with Chrome >= 55 Dec 9, 2016
@IvanSanchez
Member

@richardhinkamp Definitely related, thanks for commenting.

I'll try to get my hands at a Chrome 55 / 56 next week and see what's going on.

@richardhinkamp richardhinkamp referenced this issue in Leaflet/Leaflet.draw Dec 9, 2016
Open

Polygon issues on IE11 #618

@juanmaneo

@IvanSanchez
Did more tests, forgot to mention I use leaflet 1.0.2 stable version (1.0.2+4bbb16c)
On new chrome version starting 55, L.Browser.pointer becomes True because of the change you mentioned but L.Browser.touch too.
I was hopping L.Browser.touch would still be False so I could "patch" my code and/or leaflet like you suggested ...

Thanks for looking into this.

@alex-michaud

I also encountered a problem with Chrome 55 on android. No problem with the desktop version.
Take a look at this Chrome issue :
https://bugs.chromium.org/p/chromium/issues/detail?id=670942
They point to this openlayer issue :
openlayers/ol2#1510

@IvanSanchez
Member

It seems that things are not broken for most sites using Leaflet 1.0.2.

I can see that the mouse dblclick behaviour (in chromium 55 in desktop Debian) is glitchy: it triggers no animation when double-clicking on the same pixel, and animates if the pointer moves a tiny bit during the double-click. Possibly a (mostly) harmless side effect of the duplicated dblclicks.

@juanmaneo
juanmaneo commented Dec 12, 2016 edited

@IvanSanchez
Yes, for the site I'm using I could workaround it by forcing in my code L.Browser.pointer and L.Browser.touch based on navigator.appVersion.
My workaround disables tablet usage on android I think but I tested on iPad tablet on only real case for me on tablet and since Safari is used there is no issue.
Here is the workaround code that fixed this for me.

(function () {
  if(! L.Browser.chrome) 
    return;

  console.log("Testing chrome version: ");
  var x = navigator.appVersion;
  var y = x.split('Chrome/')[1];

  if( typeof y != 'undefined' ){
    y = y.split(' ')[0];
    if(y >= "55.0.2883.75") {
      L.Browser.pointer = false;
      L.Browser.touch = false;
    }
  } 
}());
@dtapuska

I am seeing your log messages fired twice but it appears to possibly be something in your jquery/leaflet code that is handling the events.

When I use monitorEvents(document, "dblclick"); in the devtools command line I only see one dblclick being dispatched to the document. Are you certain this is an error in User Agent and not in the frameworks you are using? Perhaps jquery is double dispatching the event for you? I'll try to do some more debugging.

@mustaqahmed, @NavidZ

@IvanSanchez
Member

@dtapuska Leaflet is the framework doing the duplicated dblclick here, because of Edge and #4127.

@juanmaneo

@dtapuska Like @IvanSanchez stated leaflet does the duplicate dblclick on new version of chrome >= 55
But the workaround I shared might help if you have similar issue until there is a better way...

@z0d14c
z0d14c commented Dec 13, 2016

also seem to be getting 2 touch events + 1 mousedown event on IE11, at least when using the Leaflet.draw plugin.

@alex-michaud
alex-michaud commented Dec 13, 2016 edited

Adding this css instruction fixed the problem for me.

.leaflet-container {
  touch-action: none;
}

Everything work again on Android Chrome >= 55
https://bugs.chromium.org/p/chromium/issues/detail?id=672770

@IvanSanchez
Member
IvanSanchez commented Dec 13, 2016 edited

@alex-michaud That's the wrong approach, please see #4552 and #5187.

@z0d14c
z0d14c commented Dec 13, 2016

+1 for solving this issue, i believe it is causing us big problems in IE11

@perliedman perliedman closed this in #5185 Dec 14, 2016
@IvanSanchez
Member
IvanSanchez commented Dec 14, 2016 edited

The master branch still exhibits this bug on WinPhone (left) and Chrome>55 (center) on mobile. Firefox (right) and Safari (not shown) behave as expected, as they still rely on TouchEvents exclusively.

img_20161214_130707

I used https://playground-leaflet.rhcloud.com/foju/edit?html,output for this test.

Right now I'm wondering if any browsers implementing PointerEvents need the DomEvent.DoubleTap.js hack at all. Maybe IE10???

@IvanSanchez IvanSanchez reopened this Dec 14, 2016
@dtapuska

@alex-michaud @IvanSanchez some of alex's comments about adding the touch-action aren't necessarily relevant against the trunk/head version of leaflet. They are using an old version of map-box 2.4.0 which uses an older version of leaflet

@IvanSanchez
Member

I just checked with a Win8+IE10 VM, and it seems that any browser that implements PointerEvents has no problem firing the dblclicks.

screenshot_20161214_155336

I'll try and dig through the history of src/dom/DomEvent.DoubleTap.js to see why we added the MSPointer hacks, but right now I'm quite confident that we can skip the synthetic dblclicks for any browser capable of PointerEvents.

If anybody has a MS Surface running IE10, IE11, Edge or Chrome>55, please go to the URL that appears in the IE10 screenshot, and double-tap the screen. The expected result is that there are two dblclick events, like in the screenshot and like in the phones photograph.

@dtapuska

I've tried on Edge on a Windows Phone and I don't see the user agent generated event.
img_20161214_102355

@teddink FYI; I believe that perhaps Edge might need to match Android here for interop.

But I don't think you can remove this as it appears associated with an interop difference between Edge and Android on touch. This appears to be different behavior than IEMobile.

@atdiff
atdiff commented Jan 4, 2017

I'm experiencing this same issue while upgrading from 0.7.7 to 1.0.2 and using Chrome 55.0.2883.75. Is there an update on a fix or a preferred workaround?

@perliedman perliedman closed this in #5248 Jan 13, 2017
@IvanSanchez
Member

I'll ask for another round of testing in real browsers, using https://playground-leaflet.rhcloud.com/cahe . Double-click or double-tap the map; the expected result is one dblclick event (synthetic in touchscreen safari, touchscreen firefox and touchscreen chrome <55, native elsewhere).

I've tested in:

  • Touchscreen chrome >55
  • Touchscreen firefox 50
  • Touchscreen IEmobile 11 (WinPhone 8.1)
  • Touchscreen Safari (iPad 2)
  • Desktop Firefox 51
  • Desktop chrome >55

Can anyone please test on Edge, both mouse and touchscreen? cc @dtapuska

@perliedman
Member
perliedman commented Jan 18, 2017 edited

This is the output when I double tap the map in Win10/Microsoft Edge 38.14393.0.0:

Leaflet 1.0.2+7f11fdf
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

pointerdown pointer (touch)
mousedown mouse (1)
pointerup pointer (touch)
mouseup mouse (1)
click pointer (touch)
pointerdown pointer (touch)
mousedown mouse (2)
*** dblclick synthetic
pointerup pointer (touch)
mouseup mouse (2)
click pointer (touch)

Attempting to double click with the mouse does not fire any dblclick events, even if I try to click really fast:

Leaflet 1.0.2+7f11fdf
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

pointerdown pointer (mouse)
mousedown mouse (1)
pointerup pointer (mouse)
mouseup mouse (1)
click pointer (mouse)
pointerdown pointer (mouse)
mousedown mouse (2)
pointerup pointer (mouse)
mouseup mouse (2)
click pointer (mouse)

😞

@IvanSanchez
Member

Attempting to double click with the mouse does not fire and dblclick events, even if I try to click really fast

WAT.

😡

@IvanSanchez IvanSanchez reopened this Jan 18, 2017
@hyperknot
Collaborator
hyperknot commented Jan 18, 2017 edited

Hey, dblclick mouse (2) on Mac trackpad:

Leaflet 1.0.2+7f11fdf
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
pointerdown pointer (mouse)
mousedown mouse (1)
pointerup pointer (mouse)
mouseup mouse (1)
click mouse (1)
pointerdown pointer (mouse)
mousedown mouse (2)
pointerup pointer (mouse)
mouseup mouse (2)
click mouse (2)
*** dblclick mouse (2)
@davetimmins

I see the same behavior as above on Edge with mouse dblclick not working,

Leaflet 1.0.2+7f11fdf
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

pointerdown pointer (mouse)
mousedown mouse (1)
pointerup pointer (mouse)
mouseup mouse (1)
click pointer (mouse)
pointerdown pointer (mouse)
mousedown mouse (2)
pointerup pointer (mouse)
mouseup mouse (2)
click pointer (mouse)

if I do a double touch first though then the mouse dblclick does work

Leaflet 1.0.2+7f11fdf
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

pointerdown pointer (touch)
mousedown mouse (1)
pointerup pointer (touch)
mouseup mouse (1)
click pointer (touch)
pointerdown pointer (touch)
mousedown mouse (2)
dblclick synthetic
pointerup pointer (touch)
mouseup mouse (2)
click pointer (touch)
pointerdown pointer (mouse)
mousedown mouse (1)
dblclick synthetic
pointerup pointer (mouse)
mouseup mouse (1)
click pointer (mouse)
pointerdown pointer (mouse)
mousedown mouse (2)
dblclick synthetic
pointerup pointer (mouse)
mouseup mouse (2)
click pointer (mouse)
@timlohnes

I get the same result as @davetimmins. When you doubleclick after doubletapping, it always works. So if you load, then doubleclick (not working), doubletap (working), doubleclick (working), doubleclick (working).
It just takes a doubletap to intitiate the doubleclick.

@perliedman
Member

I can verify the same, after a double tap has fired a dblclick, it will also fire dblclick for double mouse clicks.

@perliedman perliedman added a commit that referenced this issue Jan 19, 2017
@perliedman perliedman Add synthetic dblclick for MS Edge with mouse
Also, reset doubleTap status after firing a dblclick to avoid
keeping an old state around.

Close #5180.
a712ea1
@IvanSanchez IvanSanchez referenced this issue in w3c/pointerevents Jan 19, 2017
Open

Behaviour of dblclicks is not specified #171

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment