Bug 238589

Summary: REGRESSION (r281913): Map toolbar flickers when dragging the map on https://gis.ee/
Product: WebKit Reporter: Simon Fraser (smfr) <simon.fraser>
Component: CompositingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: changseok, esprehn+autocc, ews-watchlist, fred.wang, glenn, kondapallykalyan, pdr, rbuis, simon.fraser, webkit-bug-importer, webkit, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=217154
https://bugs.webkit.org/show_bug.cgi?id=262107
Attachments:
Description Flags
Reduction
none
Patch
ews-feeder: commit-queue-
Patch
none
Patch none

Description Simon Fraser (smfr) 2022-03-30 21:30:44 PDT
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.
Comment 1 Simon Fraser (smfr) 2022-03-30 21:33:20 PDT
I think this also affects Strava maps (I've seen those map controls get hidden too).
Comment 2 Simon Fraser (smfr) 2022-03-30 21:46:43 PDT
<rdar://90483049>
Comment 3 siim 2022-04-05 03:13:24 PDT
*** Bug 238796 has been marked as a duplicate of this bug. ***
Comment 4 siim 2022-04-05 03:17:09 PDT
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.
Comment 5 siim 2022-04-14 04:47:17 PDT
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
Comment 6 Simon Fraser (smfr) 2022-04-18 16:31:00 PDT
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.
Comment 7 Simon Fraser (smfr) 2022-04-18 21:57:44 PDT
Created attachment 457855 [details]
Reduction
Comment 8 Simon Fraser (smfr) 2022-04-19 14:10:04 PDT
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.
Comment 9 Simon Fraser (smfr) 2022-04-19 21:25:25 PDT
Created attachment 457958 [details]
Patch
Comment 10 Simon Fraser (smfr) 2022-04-19 22:14:46 PDT
Created attachment 457961 [details]
Patch
Comment 11 Simon Fraser (smfr) 2022-04-20 13:22:19 PDT
Created attachment 458008 [details]
Patch
Comment 12 EWS 2022-04-20 15:31:03 PDT
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].
Comment 13 siim 2022-05-23 05:30:24 PDT
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?