CSS z-index bug

[ilblog]

Unfortunately a bug in Chrome browser does not respect CSS stacking context regarding z-index. Therefore tile-pane with 400 z-index overlays the stuff, that is even outside map container.

The patch is applied on https://windy.com and works flawlessly more than 1 month

With patch applied

Without patch, original Leaflet's CSS

[IvanSanchez]

Unfortunately a bug in Chrome browser

Which one?

---

Looks related to #3690

[johnd0e]

@ilblog?

I've re-added .leaflet-pane { z-index: 400; } back on Windy.com haven't observed any difference.
Please provide some sample to reproduce the issue.

[Malvoz]

I've re-added .leaflet-pane { z-index: 400; } back on Windy.com haven't observed any difference.

@johnd0e If I re-add the styles I see that all the controls disappear in Chrome.

Looks related to #3690

@IvanSanchez I can confirm that this PR would indeed fix that issue.

But it's not entirely clear to me what the implications would be if z-index was removed for leaflet-pane as this PR suggests. Could that introduce other problems?

---

Other fixes for the issue described here for windy.com:

• isolation: isolate on leaflet-container as suggested in z-index change breaks jQueryUI use #3690 (comment)
• contain: paint on leaflet-container (fixed a similar issue: Map not displaying on Chrome on 3 devices #7699)