Site URL: https://www.ngoborders.org/blog
All,
I am using the mapplic map tool kit, and using iFrame to embed it on my client's site. The map directory/files are hosted on https://www.ngoborders.com/ngomap. The iFrame code which is embedded on the live site (https://www.ngoborders.org) is the following:
<iframe src="https://www.ngoborders.com/ngomap/" height="650" style="width: 100%; border: none;"></iframe>
The code works fine on desktop. It WORKED fine previously on mobile/tablet - but does not work now. I haven't made any changes. The map doesn't work on iPhone or iPad via Safari or Chrome.
One thing I just noticed is that when I run Web Inspector on iPhone 13 Pro or my iPad Pro, I get the following:
Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “www.ngoborders.com” which could put your confidential information at risk. https://www.ngoborders.com/ngomap
I DON'T get this error when running Web Inspector on Desktop. So why am I getting this ONLY on mobile? I think that's why my map is being blocked on mobile. How can I fix this? The SSL Cert for ngoborders.com is valid...
Squarespace displays the map OK in the design portal when you toggle the mobile or tablet display mode. Safari and Chrome on Desktop will show the iFrame if you resize the window to a mobile display. In Chrome's Web Inspector, if you switch it to mobile view, it also shows the iFrame. So, I think either something with iOS or maybe Squarespace?
To recap:
Desktop (macOS) - works OK
Mobile (iPhone 13 Pro iOS 15.0.2) - Does not work
Tablet (iPad Pro 11-inch iPadOS 15.0.2) - Does not work
Any help would be really great, thank you!