Markers disappear when panning in WebKitGTK

[marcinbugaj]

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. Install WebKitGTK based browser. Could be epiphany in ubuntu 22.04 (apt install epiphany-browser)
2. Load https://leafletjs.com/
3. This website has an example with 1 marker. Pan the map so that the marker is not visible. Then move to the area where the marker should be present. It disappears.

I spotted the issue when writing UI for webview based application using https://github.com/Boscop/web-view . As already said, it can be reproduced using epiphany browser that is based on WebKitGTK 2.36

Expected behavior

The marker should not disappear. It behaves correctly in chrome.

Current behavior

The marker disappears.

Minimal example reproducing the issue

No response

Environment

• Leaflet version: 1.9.4
• Browser (with version): epiphany-browser 42.1-1 from ubuntu 22.04
• OS/Platform (with version): Linux

[IvanSanchez]

Can reproduce on Epiphany 45.2 on Debian.

Resetting the marker's translate3D CSS rule via devtools makes the marker reappear.

[IvanSanchez]

I suspect that messing with L.DomUtil.setTransform() could fix this, but I'm unsure of exactly how. We got rid of 2D transforms a while ago, and Epiphany says it supports 3D transforms anyway :-|

[marcinbugaj]

Is there any workaround for this? Or perhaps can it be fixed in Leaflet?

[IvanSanchez]

There's no quick workaround. There should be some way of handling this on the Leaflet side, but right now I think this can be considered as an upstream bug (i.e. a bug in WebKitGTK).

I wonder if this can be reproduced somehow by setting translate3D transforms manually on a couple of <div>s.