Adding 'leaflet-dragging' class causes drag start slow down

[danzel]

tl;dr: #2164 (comment).

---

https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js#L95

When you start a map drag we add this class so that you get the grabbing hand.
In larger apps, this causes a bit of a slow down as the browser recalculates styles

(We have 1000 markers with leaflet.labels attached)

If you comment out this line the drag start is super smooth and there are no big lumps in the timeline during a drag.
If anyone has any ideas that still give us the dragging hand without the performance hit that'd be awesome :)
I'll fiddle around a bit later today.

[jfirebaugh]

I've seen something very similar in iD and have a hunch that there was a recalculate style-related performance regression somewhere in the last several Chrome versions.

Worth checking Chrome Canary.

[danzel]

Just tested in Canary 33, issue still exists there.
Any idea how far back I should go in Chrome to confirm the hunch?

[jfirebaugh]

No, couldn't really say.

Do you know a good way of testing old Chrome versions? I wanted to do that but they seemed very difficult to obtain.

[danzel]

Not an exact version, but they do keep continuous chromium builds on here:
http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html?path=Win/
Page takes a bit to load, if you click through you can see the date it was built to help track it down.
edit: this took me ages of searching when I originally found it :)

[mourner]

@danzel is it only reproducible on Chrome, and not on other browsers like Firefox, Safari, IE?

[danzel]

Good question!
I'm pretty certain there is a small lag at the start of a drag in IE10, its hard to confirm with no timeline view.
I don't have FF in front of me, I'll do some further cross browser testing tomorrow.

[mourner]

OK, if we don't figure this out, lets just sacrifice having the dragging hand cursor outside of the map view, and set the dragging class on map container. I think it's a good compromise if it means better performance for an essential operation like dragging. GMaps does this apparently btw. Won't help with the 1000 markers problem though I suppose...

[mourner]

Another option to try is having a transparent empty div with the cursor set over everything while you drag. In theory it shouldn't cause relayout of all other elements, but I'm not sure.

[jfirebaugh]

.leaflet-dragging is also sometimes used in app CSS to implement effects like "hovering" a marker during drags.

[danzel]

IIRC leaflet.draw uses an empty transparent div when drawing to prevent clicking on existing vector layers etc

[danzel]

Setting style on document.body:

Setting the style on this._element:

Mouse pointer still changes, so this is a win.

Was thinking about setting it on e.target, it works on map-mobile.html, but on a map with a vector overlay it doesn't, we'd need to set the style on that too. Complexity is probably not worth the win in this case.

[mourner]

@danzel I remember using this initially, but eventually switched to document as setting cursor on the element introduced some undesirable cursor effects, such as cursor jumping back and forth when dragging near a marker, or dragging a marker. Is it not like that in modern browser versions?

Also, what's the reason that 2468 elements are affected if you change cursor on just one element?