Flickering while zooming on some Android WebView with custom CSS-filter

Checklist

• I’ve looked at the documentation to make sure the behavior isn’t documented and expected.
• I’m sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I’ve searched through the current issues to make sure this hasn’t been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

1. Set a custom CSS-filter on img. For example: img { filter: invert(1); }
2. Create an Android-app which opens the map in a WebView
3. Pinch zoom

Expected behavior

While pinch-zooming some strange flickering can be seen; and it seems like a “none-styled map” is overlayed above the map. The issue is easier to see if you have zoomSnap 0.0001 or something similar.

Current behavior

The map should be pinch zoomed correctly

Minimal example reproducing the issue

https://github.com/andreandersson/leaflet-bug/tree/main

Environment

NOTE: This does not seem to be the case with most WebViews, but only some phones… We have been able to see it on Pixel 6 and 7 Pro. See video in the repo linked in the example reproducing the issue.

• Leaflet version: 1.9.2
• Browser (with version): Android System WebView 106.0.5249.126
• OS/Platform (with version): Android 13 (seen in 12 as well)

[jonkoops]

For 2.0 we’re aiming for latest Chrome (and Chromium derivatives), Firefox, Safari. Basically all the ‘evergreen’ targets.

[jonkoops]

Created a PR for this under #8651, hopefully to kickstart some more discussion.