I am not sure why but on my website with leaflet, since yesterday the map is blurry, the tiles border are visible and on some tiles I have this weird overlap with english and russian street names:
I tried to isolate the issue with a simple code like this: but still no progress.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Simple leaflet map</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> <style> #map { height: 100vh; width: 100%; }</style></head><body><div id="map"></div><script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script> var map = L.map('map').setView([51.505, -0.09], 13); var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);</script></body></html>
I tried using leaflet files locally and with npm, doesn't change anything (1.9.4).I also tried changingI am using Chrome (Version 125.0.6422.142) and the blur disapears on other browsers (like Brave and Edge) but not the weird overlap.
Any idea what this is ?