Leaflet
Leaflet copied to clipboard
imageOverlay (and svgOverlay) disappear at zoomLevel = 13
Checklist
- [X] I've looked at the documentation to make sure the behavior isn't documented and expected.
- [X] I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
- [X] I've searched through the current issues to make sure this hasn't been reported yet.
- [X] I agree to follow the Code of Conduct that this project adheres to.
Steps to reproduce
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/>
<style>
#map { height: 800px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script>
const baseDimensions = [3072, 4096];
const Aberdeen = { lat: 1880.25, lng: 3665.125 }
const map = L.map('map', {
crs: L.CRS.Simple,
})
L.imageOverlay('https://caveduroliste-westmarches.s3.amazonaws.com/public/maps/Monde%20WM%20complet.jpg', [[0,0], baseDimensions]).addTo(map);
</script>
</body>
</html>
Expected behavior
Even highly pixelated, the imageOverlay should still display. In my specific case, the real issue is on svgOverlay I add in addition to the imageOverlay but they all fanish at the same time.
Current behavior
At zoomLevel = 13, the imageOverlay & svgOverlay fanishes. Playing with the dev tools, the layer appears again when disabling the transform3d style.
Minimal example reproducing the issue
https://plnkr.co/edit/piE5mLOR2xwDQp0H
Environment
- Leaflet version: 1.9.1
- Browser (with version): Firefox 105.0
- OS/Platform (with version): Manjaro 22.0.0
I suspect this to be closely related to https://github.com/Leaflet/Leaflet/issues/7241
Does the problem appear only in Firefox v105 only?
Tested on Chromium 106.0.5249.61, the layers vanish at zoomLevel = 14