Weird issue with cluster click and Safari

[Mathbl]

Hello,

it seems there is a problem with safari firing the onClick_ event.

The clusters doesn't even have pointer cursor when hovered.

The issue is strange, i'm investigating it but the only difference I can notice with leaflet markers is that they use .on() to bind the click event.

[theLundquist]

I had the same problem as you, I managed to put this fix together for it. Hope it helps you :)

#11

[Mathbl]

Hello!

On my side, your fix seems to mess up the normal markers and the clusters are still not clickable.

Screenshot : http://d.pr/i/SHnO

The marker is supposed to be where the shadow is.

Thanks for your effort!

[theLundquist]

Hello

Yes you're absolutely right, I'm experiencing the same thing here. I've got a feeling it's because I moved the marker clusters to the markerPane from the overlayPane.

I noticed the issue myself not long after I posted the pull request doh, I'm in the middle of trying to figure out a work around, but I've not finished yet.

I'm keep working on it :)

-----Original Message-----
From: HooliganQC [mailto:reply@reply.github.com]
Sent: 07 June 2012 15:39
To: David Wright
Subject: Re: [leafclusterer] Weird issue with cluster click and Safari (#8)

Hello!

On my side, your fix seems to mess up the normal markers and the clusters are still not clickable.

Screenshot : http://d.pr/i/SHnO

The marker is supposed to be where the shadow is.

Thanks for your effort!

---

Reply to this email directly or view it on GitHub:
#8 (comment)

---

Privileged/Confidential Information may be contained in this
message. If you are not the addressee indicated in this
message (or responsible for delivery of the message to such
person), you must not copy, distribute or take any action in
reliance to it.
In such case, you should destroy this message and kindly
notify the sender by reply email. Please advise immediately
if you or your employer do not consent to Internet email for
messages of this kind. Opinions, conclusions and other
information in this message that do not relate to the official
business of Ctrack Limited shall be understood as
neither given nor endorsed by it.

Ctrack Limited, Registration no: 04643588
Park House, Headingley Office Park, 8 Victoria Rd, Leeds, LS6 1LG
VAT #: 808888965

[Mathbl]

No problem sir!

I guess the marker-pane has something different than overlay-pane that makes it clickable on safari. It may be better to keep clusters in overlay-pane, but try to find the property that lack to overlay-pane.

Again, thanks for trying.

[theLundquist]

I think I've sorted it. The various elements within the markerPane (markers) and the overlayPane (paths and shapes) were causing things to get pushed out and offset. Very annoying.

So I've had the LeafClusterer create a new pane for the clusters. Add everything to that and it solves the problem.

Check out my updated pull request or my fork, let me know if you find any more problems before i do :)

[Mathbl]

Hello theLundquist,

Good idea there! I've tested it this morning, but it doesn't fix the click problem on safari. It doesn't mess up the markers anymore, but clusters are still not clickable.

[theLundquist]

Hhhmmmm

Unfortunately I've got no access to Safari, I'm using chrome at the office. I had the same problem as you and thought that the problem would be the same, maybe not :(

Have you got any tools that you can explore the DOM with? I noticed that the cluster-marker-container object was not only in the wrong place relative to the cluster icon, but had a width/height of 0. I think this is why the clusters weren't clickable.

So all my fix did was resize and reposition the container div. It might be that safari doesn't like some of the css styles I'm using to do the re-positioning or some combination of styles.

Another thing you might be able to try is there is a peiece of logic in the cluster code (about line 657) that deals with attaching a event listener, check that the correct ones are being used for safari.

If neither of these work, you might be on your own. Try using the DOM explorer and see what you can find.

Good Luck.

-----Original Message-----
From: HooliganQC [mailto:reply@reply.github.com]
Sent: 08 June 2012 15:59
To: David Wright
Subject: Re: [leafclusterer] Weird issue with cluster click and Safari (#8)

Hello theLundquist,

Good idea there! I've tested it this morning, but it doesn't fix the click problem on safari. It doesn't mess up the markers anymore, but clusters are still not clickable.

---

Reply to this email directly or view it on GitHub:
#8 (comment)

---

Privileged/Confidential Information may be contained in this
message. If you are not the addressee indicated in this
message (or responsible for delivery of the message to such
person), you must not copy, distribute or take any action in
reliance to it.
In such case, you should destroy this message and kindly
notify the sender by reply email. Please advise immediately
if you or your employer do not consent to Internet email for
messages of this kind. Opinions, conclusions and other
information in this message that do not relate to the official
business of Ctrack Limited shall be understood as
neither given nor endorsed by it.

Ctrack Limited, Registration no: 04643588
Park House, Headingley Office Park, 8 Victoria Rd, Leeds, LS6 1LG
VAT #: 808888965

[Mathbl]

I already debugged the problem. The addEventListner is never called in safari. I just don't understand why as it uses webkit so it's suppose to work, if it works with chrome. So i'm a little bit lost here. :/ thanks for you help

[theLundquist]

Did you have any luck with this bug in Safari yet Hooligan? I've had to come back and take another look at it as its doesn't work on the iPad either (although thats not really a suprise)?

[theLundquist]

Sorted it. I've got a load of junk code in my copy so after I have a break, I'll come back and put it back in. Long story short, its a problem with some of the css position:absolutes on the cluster, container and the pane. For some reason in this situation the addEventListener doesn't fire when the cluster marker, or any of its containing divs have the position:absolute css property set. You need to specify the values for translate3d before the cluster both positions itself correct AND fires the event listener.

I've not real idea why this works, but my first thought is that a load of the other elements on the map are being positioned using this (including some of the parent elements for the cluster markers) and I think that when the user clicks either safari is not making the correct calculation for the click location, or something is getting in the way of the cluster marker and is intercepting the click (but only when position:absolute is used)

I've been mashing my head against this for about aproximately 7 and half hours today >__< I think I need to lay down. I'll get the fixes up in a little while for people to have a look at.

[Mathbl]

Hey good to hear that!

I'll be there to test it.

[kinhunt]

theLundquist, Thank you for your hard work. I've tested your solution. It works for safari and safari mobile. However the positions of clusters are incorrect. maybe some conversion is needed before setting webkitTransform? what do you think?

[theLundquist]

Hi Kinhunt

You're very welcome. As for the positioning issue, I assume that you mean that the cluster is sometimes offset a little or isn't quite over the centre of the marker area?

I think that this is currently a known issue for the average position of the all the markers in a cluster #5 have a look at that and see if it is a solution for you.

[kinhunt]

Hi theLundquist:

I think the problem I have is different from issue five. Please see the example:

Default leafclusterer.js
http://weburner.com:8080/lab/leaflet/debug/map/map.cluster.html

Your solution:
http://weburner.com:8080/lab/leaflet/debug/map/map.cluster.lq.html

you can see from the source code. I am using the markers with same lat but different lng. So the default leafcluster.js behave correctly.

[kinhunt]

hi:

i got the solution by adding

this.container_.style.position = "absolute";

before

this.container_.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(pos);

the elements have offsets before doing translate3d if not setting to absolution.

cheers