Map sometimes showing as whole world in Chrome

Hi All

I’ve been using OSM on my website for a few years now, and the iframe embedded map, which I just have on the home page, has always shown ok.

Since December 2019 I’ve noticed that the map sometimes shows the whole world when loading the page in Chrome (I’m using Version 79.0.3945.117 Official Build 64-bit).

If I Ctrl / F5 the correct zoomed map shows, but if I Carriage Return on the URL it show the world or correct map randomly (about 50/50). Just a little worried that users of the site might just be getting the world on opening the page as I often get. I’ve tried this on 4 PCs in two locations and all have the same issue in Chrome. Oddly IE11, Edge and Firefox are fine.

Any one else had similar issues or know what might be causing this?

Thanks
Mike

It’s not just you - someone else mentioned this problem with Chrome (but not firefox) recently. Unfortunately, without a bit more information about the actual site that shows the problem it’s difficult to comment about what might be happening.

Many thanks for responding to this issue, I really appreciate it :). I guess it’s good to know I’m not the only one.

I thought it might be a page load speed issue so created a blank page with the iframe code, and nothing else, and whilst it didn’t show the world map as often it did appear when continually pressing enter on the URL. Again only an issue with Chrome.

I’ve found a few articles on some changes with Chrome:

Article - Nov 2019
Upcoming chrome changes and breaking issues with iframes
https://techcommunity.microsoft.com/t5/microsoft-stream-forum/upcoming-chrome-changes-and-breaking-issues-with-iframes/m-p/909679

Article - May 2019
Requests within Iframe being cancelled since chrome 73
https://support.google.com/chrome/thread/2412905?hl=en

Article - May 2019
Google Chrome’s Native Lazy Loading iFrames May Not Be So Great For Advertising
https://www.admonsters.com/chrome-native-lazy-load-advertising-impact/

So perhaps the changes are causing this issue?

I’ve tried adding some reload JS using an ID in the iframe but isn’t working on-load (as it’s a reload I guess).

I’ve also been playing with <object… and <embed. Neither have the iframe issue and load the OSM map every time in Chrome, but sizing is an issue. I’ll just have to work out how to make them responsive to different portals.

If you’ve any ideas what happened to Chrome with OSM iframes, and if there are any fixes, I’d be really grateful.

Should just say that I’ve changed my username to pnesouth. Still the same user.

Hi,

I think we’re also seeing the same problem with our website and Chrome and embedded OSM: https://www.fishersgreensc.org.uk. The map opens fine first time, but simple refreshes gives the complete world. A forced/full refresh gets back to the correct map location.

I’ve tried adding a timestamp to the URL and various tweaks to the iframe we’re using, but no luck. There’s nothing obvious in the Chrome developer console; however, the console has some network differences to Firefox, with the latter looking for a CSS file that Chrome isn’t. Perhaps an indication it’s getting further.

OSM developers - Not sure if this is the code responsible, but the JS createTitle/getTitleURL code is considering cross-origin and also building the zoom URL. Perhaps Chrome is tripping up somewhere around here given their recent security changes in this area?

Regards,
Bill

It does look as if Chrome is applying same lazy loading logic to the iframe and that is buggy. Chromium introduced the loading attribute in version 76.

Could you try adding a “loading=eager” attribute to the iframe tag? I’m not sure if that will help, but could be sth. worth trying (even if it is contrary to what chrome describes as laoding=eager should be the default if none is set).

Thanks for the suggestion, but it doesn’t help :frowning:

I’ve tried the OSM URL outside of an IFrame and that works, so it’s something to do with IFrame. I’ve also tried relaxing various IFrame security features with no joy.

For reference, the iframe is:

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.014516115188598635%2C51.721292696505174%2C-0.002521276473999024%2C51.72513413988513&layer=mapnik" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="200" height="300" style="border: 1px solid black;"></iframe>

FYI - I’ve posted bug query here: https://github.com/openstreetmap/openstreetmap-website/issues/2531

Hi All

It’s great to see more people taking this up and the link out to GitHub. I really hope there’s a solution.

I have about 65 sites all with the same problem and notice its also happening with the latest version of Opera. I’ve also seen this all over the place including mainstream UK NHS sites.

In the meantime I’ve been experimenting with <embed src= and <object data=. Neither methods have this issue, but I’m having to compromise on the map height using embed. But embed does work well with responsive sites and seems ok with all browsers.

Does anyone know of an alternative code method? I’m happy to plonk (technical term) lots of JS in if this is an option, but quick reading suggests it’s way more complex than that? I basically just want to replicate a simple map location with a marker, that all. Nothing fancy.

If useful, instead of using iframe, using object seems to work best:

<object data="https://www.openstreetmap.org/export/embed.html?bbox=<<-- your map code -->>" border="1" width="100%">
</object>

I tried object with IE11, Edge, Opera, Chrome, Firefox and an old Win version of Safari and all ok.

or you could try embed:

<embed src="https://www.openstreetmap.org/export/embed.html?bbox=<<-- your map code -->>" width="100%" onerror="alert('URL invalid !!');">
          </embed>

add in your map code, replacing <<-- your map code -->> to either above.

I tried embed with IE11, Edge, Opera, Chrome, Firefox and all ok. The old version of Safari did some very odd things! I haven’t got a Mac to test so can’t confirm if ok with latest Safari (ok on an iPhone though). Also you cannot add a border with embed.

Both work for my responsive sites for all view-ports (Desktop, Tablet Portrait, Mobile Landscape and Mobile Portrait).

The only issue with object and embed is the map height is only about 60% of the iframe height, but this had some css to stretch the map. Looks ok though.

The Object tweak worked for me :-). I’ll add your info to the bug report to help the developers.
Thanks,
Bill

Glad it worked for you Bill :slight_smile:

object certainly seems more reliable and customisable than embed. I think I’ll update my sites on-demand, in the hope that the iframe method will return.
Cheers,
Mike

Hi All

Is it my imagination or has this issue resolved? We’ve converted about 20% of our sites to , but noticed today that all the

Many thanks to anyone who might have corrected this.

Mike

Unfortunately I’m still seeing this in the latest Chrome.

I have the same problem, but I don’t think that updates affect badly to Chrome. Have you tried to ask the support about the issue?
I tried to contact them, but I still got no response.

Hello, I was having the same problem and found a solution for me. Try this as a workaround:
Copy the iframe code and use it twice, then add some css to hide the first iframe:

<iframe src="..."  style="display:none;"></iframe>
<iframe src="..."></iframe>

Hello,
None of the earlier solutions worked out for me.
I managed to sort it out using the HTML object tag:

<object
        width="100%"
        height="100%"
        data="https://www.openstreetmap.org/export/embed.html?bbox=2.147593796253205%2C41.379032530763546%2C2.1498468518257146%2C41.380509765068766&amp;layer=hot&amp;marker=41.37977115211044%2C2.1487203240394592"
      ></object>