Why not ask your question on the new OpenStreetMap Community Forum?



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:

 object loading="lazy" width="450" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data="https://www.openstreetmap.org/export/embed.html?bbox=9.50119972229004,51.325060678316106,9.513173103332521,51.32918373770352&amp;layer=mapnik&amp;marker=51.327118902266484,9.50718641281128"></object>

or the following code:

iframe loading="lazy" width="450" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=9.50119972229004,51.325060678316106,9.513173103332521,51.32918373770352&amp;layer=mapnik&amp;marker=51.327118902266484,9.50718641281128"></iframe>

(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:

  • on Chrome/Chromium using iframe instead of object
  • on Chromium/FF making mistakes in the coordinates

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.

asked 19 Apr '21, 20:45

ulrikeu's gravatar image

accept rate: 0%

edited 20 Apr '21, 11:56

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.

(20 Apr '21, 11:13) ulrikeu

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.

permanent link

answered 20 Apr '21, 11:44

ulrikeu's gravatar image

accept rate: 0%

edited 20 Apr '21, 11:56

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 19 Apr '21, 20:45

question was seen: 1,406 times

last updated: 20 Apr '21, 14:26

powered by OSQA