Please try with 1.8.0-beta.0.

I discovered that problem appears only when there are a lot of div icons.

Same glitches in 1.8.0-beta.0 also.

Maybe 15.4 safari crashes when there are too many dom elements but it was not problem in 15.3 safari.
Safari is frustrating :(

Any luck with this? Or anything I can help troubleshoot? My issue on React Leaflet mentioned above includes a minimum codebase to reproduce, if that helps.

I guess we have to wait for iOS 15.4.1 not much to do here.
I have submitted bug report at Apple Feedback Assistant.
Maybe you can submit it too with your app url so they know it is problem for many users.

https://feedbackassistant.apple.com/

@TurtIeSocks yes we need to wait for the next IOS release. No one of the maintainers has an IOS Phone. If it is a long term problem, we need to look for a solution

iOS 15.4.1 did not fix it.

But now I tested with new beta release v1.8.0-beta.3 and now controls don't get hidden under tile layer.
#8102 maybe it fixed it?

Edit: Celebrated too early. 5 minutes of panning around and finally problem appeared again.

We've had a few users reporting this issue too with our route planners, using Safari 15.4 on both desktop and mobile:

Desktop: https://www.plotaroute.com/routeplanner
Mobile: https://www.plotaroute.com/mobile/routeplanner

We haven't been able able to reproduce it though, so it does seem to be very intermittent and dependent on some set of circumstances that we haven't yet been able to identify.

Any more clues as to what the trigger is or how to workaround the problem? For example, if it's a corrupt zIndex issue, would it be possible to check zIndex of the controls after after the map has been dragged to ensure that it is higher than the zIndex of the tile layer?

Any more clues as to what the trigger is or how to workaround the problem? For example, if it's a corrupt zIndex issue, would it be possible to check zIndex of the controls after after the map has been dragged to ensure that it is higher than the zIndex of the tile layer?

I changed controls z-index to 999999 manually in safari developer tools (usb connection to phone) and controls still stayed under tile layer.

Webkit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=238589

We've had a few users reporting this issue too with our route planners, using Safari 15.4 on both desktop and mobile:

@mourner can you test it on your mac?

I tested it with the example from the tutorial on a IPhone and it happened too.
I didn't find a step by step instructions to reproduce but mostly it happened after zooming fully out and zooming / moving while loading. Maybe we have more luck with debugging on a mac.

We've had a few users reporting this issue too with our route planners, using Safari 15.4 on both desktop and mobile:

mourner can you test it on your mac?

I tested it with the example from the tutorial on a IPhone and it happened too.
I didn't find a step by step instructions to reproduce but mostly it happened after zooming fully out and zooming / moving while loading. Maybe we have more luck with debugging on a mac.

I couldn't reproduce on a Mac but back when I first opened the React Leaflet issue, I hooked up a 15.4 iPad to a Mac and opened up the dev tools. My best guess is that the bug/issue is related to the new Cascade Layers.

https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

You can open up the new layers dev panel and see UI components going in and out as you pan/zoom around a Leaflet map.

We think we may have found a workaround for this. As it's an intermittent problem we can't be 100% sure, but after adding the following css to the page the problem seemed to go away:

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

We have a few other DOM elements (outside of the leaflet map container) that are positioned above the map, so we had to add the same transform css for these too.

Thank you!

@plotaroute, can you make PR for it. I think it great simple fix.
Looks like there will be 1.8.0 release soon, so it would be nice to have it included.

@Malvoz I don't find the link anymore, but I mean that you shared a blog from opera dev about will-change where a workaround was transform: translate3d(0px, 0px, 0px); too. Can you please link it again?

@Falke-Design from #8044 (reply in thread):
https://dev.opera.com/articles/css-will-change-property/#the-old-the-translatez-or-translate3d-hack

@Malvoz Thank you! I searched 15 minutes ... 😄

@plotaroute can you please try to use:

will-change: transform;

The WebKit bug (#8068 (comment)) was fixed 2022-04-20.

Confirmed workarounds include:

• transform: translate3d(0, 0, 0)
• will-change: transform

@Falke-Design suggests:

.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom {
  will-change: transform;
}

Optionally, see #8068 (comment) to target Safari only.

The WebKit bug (#8068 (comment)) was fixed 2022-04-20.

@Malvoz I suggest to add won't fix , what do you think?

@Falke-Design thank you very much for the hint given 🚀
It fixed the disappearing overlays and buttons I had to struggle with 👏

The WebKit bug (#8068 (comment)) was fixed 2022-04-20.

@Malvoz I suggest to add won't fix , what do you think?

iOS 15.5 was just released and it did not fix this problem. Maybe css will-change fix is needed in Leaflet CSS?

iOS 15.5 was just released and it did not fix this problem.

File a new WebKit bug? Or ask in the existing one?

Maybe css will-change fix is needed in Leaflet CSS?

Simultaneously people are asking to remove will-change.

If it is removed from the tiles then will we not need to add it to the controls?

iOS 15.5 was just released and it did not fix this problem.

File a new WebKit bug? Or ask in the existing one?

Maybe css will-change fix is needed in Leaflet CSS?

Simultaneously people are asking to remove will-change.

Leaflet has fixes for IE8-10, but why not make fixes for millions of iOS devices?
Safari is new IE. This bug has been there for 9 months and it does not look there will be any proper fix in sight.
Safari does not auto update from App Store. iOS update is needed, but many users skip those big updates.
It means Leaflet will be broken for long time for many users.

iOS 15.5 was just released and it did not fix this problem.

@siimots Is it fixed in 15.6? Otherwise you may want to re-open your original bug that was marked as duplicate of bug 238589.

It means Leaflet will be broken for long time

AFAICT (and as described in the bug report) the bug is only appearing during pan, so it's not totally broken, more of a UX bug. Anyway, even if the workaround was added to leaflet.css it wouldn't be fixed until the next release.

If you still think it is needed, feel free to send a PR and we can re-evaluate. I think we should use the @supports CSS at-rule to target Safari only, e.g.:

/* Safari bug fix for #8068. */
@supports (-webkit-touch-callout: none) {
  .leaflet-control-container .leaflet-top,
  .leaflet-control-container .leaflet-bottom {
    will-change: transform;
  }
}

I'm using iOS 16 beta and this bug is fixed there.

I do not have access to 15.x device at the moment.

Thanks for verifying that @siimots, much appreciated.

FYI I see this issue in Chrome v 104.x on iPhone running iOS 15.5. #8068 (comment) does the trick. H/T!

FYI I see this issue in Chrome v 104.x on iPhone running iOS 15.5. #8068 (comment) does the trick. H/T!

I spoke too soon. Didn't seem to fix it completely. I'll stay tuned for the iOS update.