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?
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:
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.
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?
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).
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.
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.