FastClick gives error when used with Mapbox-gl-js

MusicForMellons

When in mobile mode in Chrome I get following error in the console when on every ‘click/touch’ (dragging and twofinger mapturning works fine):

mapbox-gl.js?31ef:395
Uncaught TypeError: Cannot read property 'x' of null
    at Point.equals (eval at <anonymous> (0.639a1ab….js:263), <anonymous>:395:661)
    at HTMLDivElement.s (eval at <anonymous> (0.639a1ab….js:263), <anonymous>:179:1098)
    at FastClick.sendClick (eval at <anonymous> (app.js:2164), <anonymous>:308:17)
    at FastClick.onTouchEnd (eval at <anonymous> (app.js:2164), <anonymous>:606:9)
    at HTMLBodyElement.eval (eval at <anonymous> (app.js:2164), <anonymous>:111:38)
equals @ mapbox-gl.js?31ef:395
s @ mapbox-gl.js?31ef:179
FastClick.sendClick @ fastclick.js?f1d9:formatted:262
FastClick.onTouchEnd @ fastclick.js?f1d9:formatted:508
(anonymous) @ fastclick.js?f1d9:formatted:88

I tried this hack but it does not work for my issue.
I ‘commented out’ the FastClick require in Quasar and then the problem is solved, so definitely related to FastClick (as the trace already suggests…).
When I click for a longer time (2 seconds or so) it is solved: no more errors when normal clicking from then on. But when refreshing the errors are back.
I tried adding class='needsclick' to my map div, but it does not solve the errors.

Mapbox-gl-js rightly says it is a fastclick issue. The fastclick repo seems deserted for a couple of years…, so no hope of support there. No similar errormessage found there.

Any suggestions?!

rstoenescu

@MusicForMellons good old investigation in fastclick code. Use some break points or console logs… would help but don’t have time for this unfortunately, sorry

MusicForMellons

I followed your advice and seriously improved my skill in breakpoints and library analysis… Following findings:
Bypassing fastclick solves the click issues.
When using fastclick:
In mapbox-gl.js the line t.equals(L) && h("click", e) produces the error as L is defined in var g = e.getCanvasContainer(), p = null, E = !1, L = null, b = null; as null. When I change L into L = !1 the errors are gone, but click behavior on my mapbox canvas is not working properly.
Typical problematic click behavior:
a) When normal clicking once the click does not work.
b) Drag, Twofingerswipe, etc work normal.
c) Testing e.g. on the compact attribution widget: It does not work when clicking once. It works when first clicking long, or first clicking right and then clicking once…
Typical behavior can be seen in this fiddle. DO NOTE the behavior only shows when truly in “touch mode”, so after going into mobile mode (F12 in Chrome) and then refresh (F5); Then click on the attribution widget and it will not open. Also the error below will show in the browser console when clicking anywhere on the map:
index.js:28 Uncaught TypeError: Cannot read property ‘x’ of null
at Point.equals (index.js:28)
at HTMLDivElement.s (bind_handlers.js:113)
at FastClick.sendClick (fastclick.js:308)
at FastClick.onTouchEnd (fastclick.js:606)
at HTMLBodyElement.<anonymous> (fastclick.js:111)
equals @ index.js:28
s @ bind_handlers.js:113
FastClick.sendClick @ fastclick.js:308
FastClick.onTouchEnd @ fastclick.js:606
(anonymous) @ fastclick.js:111
Note: when I uncommenting the initialisation lines for fastclick in the fiddle like in this one the behavior looks ok. However in my Quasar setup that is not the case. So it looks like it should be solved in the way Quasar initializes FastClick. I tried the hack mentioned earlier (and now properly ): It takes away the error but problem with clicks remains.

Click behavior on other non-map canvas elements in same screen does not give errors and behaves normal.

MusicForMellons

I found this:
https://github.com/ftlabs/fastclick/pull/308

Did you ever consider hammer.js instead of fastclick.js ? As from a glance the repo seems more ‘alive’.

MusicForMellons

When using the PR of FastClick clicking on markers on my mapbox now works!

However somehow mapbox compact attribution widget does not work properly (only long clicks come through). BUT e.g. the mapbox navigation widget does work properly…

rstoenescu

@MusicForMellons Trying to shed all dependencies. You should carefully consider when adding deps as the bundle size can grow really fast.

And why hammerjs? Quasar has its own touch capability through some directives (check doc).

MusicForMellons

@rstoenescu Thanks. Could you give me an estimate what bundle size is still giving ‘good performance’ and when are you ‘in the danger zone’, because I have no idea what to aim for!

And if Quasar has its own touch capability…, why is FastClick included then (or do you mean THAT IS the Quasar touch capability…)?

rstoenescu

Quasar’s own touch handling (which can remove the need for something like Hammerjs): http://quasar-framework.org/api/js-touch-directives.html

Fastclick just intercepts click events and triggers them without delay on mobile platforms.

Aim for the bundle size to be as small as possible. Don’t import just any npm package just because you use 1% of it.

No More Posting New Topics!

FastClick gives error when used with Mapbox-gl-js