Bug 238589 – REGRESSION (r281913): Map toolbar flickers when dragging the map on https://gis.ee/

• Status: RESOLVED
• Resolution: FIXED
• Component: Compositing

[Simon Fraser (smfr)]

Load https://gis.ee/meri/?layers=here-ilm-tracker-ais#11/59.5007/24.7403 in Safari and drag the map around. Note the toolbar flickers and sometimes disappears.

Regressed at https://trac.webkit.org/changeset/281913/webkit/trunk.

[Simon Fraser (smfr)]

I think this also affects Strava maps (I've seen those map controls get hidden too).

[Simon Fraser (smfr)]

<rdar://90483049>

[siim]

*** Bug 238796 has been marked as a duplicate of this bug. ***

[siim]

iOS 15.4 created issue where map controls get hidden under tile layer.

How to reproduce:
* Visit leaflet map app: Example: https://gis.ee/meri/
* Zoom & pan around in map for a while
* See controls hidden under tile layer

Video:
https://i.imgur.com/Uu6H8pR.mp4
Image:
https://user-images.githubusercontent.com/7014925/161598316-48a6a455-fcf8-47c5-97da-cce9be4d374b.png


Github issues:
https://github.com/Leaflet/Leaflet/issues/8068
https://github.com/PaulLeCam/react-leaflet/issues/968
https://stackoverflow.com/questions/71614862/leaflet-control-disapperars-while-dragging-map-on-mobilereact


This problem does not appear in previous iOS versions or any other Android or Desktop browsers.

There are some reports that problem is also present in desktop Safari, but I don't have accesss desktop safari 15.4 to test it.

[siim]

Workaround fix:
.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom {
  transform: translate3d(0px, 0px, 0px);
}

https://github.com/Leaflet/Leaflet/issues/8068#issuecomment-1099073652

[Simon Fraser (smfr)]

I haven't been able to make a reduction for this yet, but I suspect that the negative z-index marker layers are part of it.

[Simon Fraser (smfr)]

Created attachment 457855 [details]
Reduction

[Simon Fraser (smfr)]

The fix for bug 217154 wasn't correct. The issue here is that if negative z-index triggers compositing on a layer, the negative z-index descendants were added to the wrong scope in the overlap map.

[Simon Fraser (smfr)]

Created attachment 457958 [details]
Patch

[Simon Fraser (smfr)]

Created attachment 457961 [details]
Patch

[Simon Fraser (smfr)]

Created attachment 458008 [details]
Patch

[EWS]

Committed r293126 (249828@main): <https://commits.webkit.org/249828@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 458008 [details].

[siim]

Looks like this fix is not shipped in latest iOS?

Leaflet maps are still broken in latest iOS. Many maps have added workarounds with will-change, but there are still lot of broken ones out there.

In which release this fix will be shipped?

[Antoine Quint]

This caused bug 272318.