|
Hi! On a website I built, I'm running into a weird issue using several iframes from OSM. I only see the world view, not the actual coordinates. It works in Chrome. And it used to work on Firefoy. It happens in Firefox, 78.9.0 esr on Debian, but also confirmed on Windows. Using the following code: or the following code: (Note that I removed the first "<" from the code above only because the code editor here didn't like it. It's not a typo that I have in my code.) It actually happens to all the maps that I included in the page, regardless if I show them on the actual web server or if I run the website locally and regardless of the inclusion method. Now, what's even weirder, extremely weird, is that when I throttle the speed using Firefox' developer tab to something smaller or equal to "regular 3G", the correct map tiles get loaded and shown. But, on my mobile phone I also use Firefox, and there I have the same issue, I see only the world view, not the correct map tiles. Regardless if I use my home WiFi or a 3G connection. I saw that the tiles get loaded from fastly CDN, and I wonder if that might have something to do with my issue. Maybe.. Firefox has a weird DNS cache and caches my request in a strange way? In the past I saw this behavior:
But in this case, it seems like it works on Chromium, and there is no mistake in the coordinates. This happens to all the maps I included on the page, 7 small maps. UPDATE see my last answer for analysis of the issue and workaround. The issue is not with OSM, but it seems to be a FF bug. |
|
In the setup I have, people click on some link and then they see a detailed map, which is by default set to "display:none" via CSS. Because of this, Firefox can apparently not correctly load the tiles. This is some sort of bug that I have no power to investigate better. But I found a workaround for my issue. Instead of using "display:none" in CSS or "hide()" with jQuery, I now use two classes which "transform:translateX(some-value-outside-viewport)" the map detail, so that it's not visible on the screen. And now the maps get loaded correctly, either using "object" or "iframe". I use "object", because otherwise we run into exactly the same bug on Chrome. |
Ok, I'm investigating this a bit further. My maps are hidden in the DOM by default. When I copy the same code to another file then it seems to work just fine. So I'm currently suspecting something related to the hidden item.