[webkit] corner div interferes with Markers

[stsydow]

The corner div overlaps Markers and catches their click events. (in Chromium 17 - Firefox 10 is fine)

Test case:
Use for example http://leaflet.cloudmade.com/index.html and move the map so that the Marker appears between the left edge and the zoombox. Now the Markers Popup won't open.

Chromium seems to have a bug in the z-index handling, maybe it has something to do with -webkit-transform.

In case of the zoombox this bug is not nice but doesn't hurt that much.
But if you put a bigger control on top of the attributionControl things get nasty.

[stsydow]

Seem to be related to issue #383. If I hardcode webkit3d to false it is fixed.

[mourner]

Sorry for a late response, could clarify what WebKit browsers/versions are affected? Is it Blackberry-only or some Chrome/Safari versions are affected too?

[stsydow]

I've run into it recently with Chromium v19 on Linux. As hack-fix I disabled the
webkit3d property:

index ec54817..b811988 100644
--- a/src/core/Browser.js
+++ b/src/core/Browser.js
@@ -11,7 +11,7 @@
                ie6: ie && !window.XMLHttpRequest,

                webkit: webkit,
-               webkit3d: webkit && ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()),
+               webkit3d: false, //webkit && ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()),

                gecko: ua.indexOf("gecko") !== -1,

It not a real solution, but may be it helps to locate the problem.

[stsydow]

The hackfix dosen't work anymore - it brakes the polylines.
Don't try it anymore. If have some time I'll have a look what's
going on with the z-index there.

For debugging one might start looking before 02c3e9b.

[mourner]

@danzel I guess the layers animation code needs more any3d checks to make L.Browser.webkit3d = false not break anything (it is used in several occasions, not only this one).

[danzel]

Yep, have sent a pull to fix this.

New hack will be:

L.Browser.webkit3d = L.Browser.any3d = false;
(You need to set both of them).

[stsydow]

The hackfix doesn't work for me.

I spend some time investigating it. As it seems z-index becomes/should become irrelevant if -webkit-transform is set.
(see https://bugs.webkit.org/show_bug.cgi?id=61824)
So the parctical solution seems to me to position the map controls also via -webkit-transform or with top;left for the 2D case - without any corner container.

I know its not as elegant as the current solution where the Browser does the repositioning and stacking of controls by itself, but I've no better idea.

[danzel]

Yeah, the hack-fix stops positioning markers/paths with -webkit-transform, which makes them work. Will take another look at it later today to see if/why it isn't.

[danzel]

Rebased, redid and repushed the fix.

Now you add:

<script>L_DISABLE_3D = true;</script>

Before including leaflet to disable 3d properly. I've tested this on debug/vector/vector-simple.html and debug/map/image-overlay.html

[danzel]

Have sent a PR that fixes this without needing to disable 3d :-)

[stsydow]

Thanks a lot! Works well.