EDIT: The symptoms of this problem are inconsistent. Today I tried this again and suddenly it works... sometimes. If I refresh over and over it works about half of the time. If it runs inside an iframe the iframe requires both allow-same-origin and allow-scripts. I can't really be sure about any of this though because it is so inconsistent. Ultimately I decided to go with IP based geolocation simply to avoid the headache.
If anyone can replicate this problem, let me know in the comments. TLDR: This link will display an error in safari and ie11, but not chrome.
The code in question:
<!DOCTYPE html>
<html>
<head>
<script>
navigator.geolocation.getCurrentPosition(function(position){
document.body.innerHTML = position.coords.latitude;
}, function(error){
document.body.innerHTML = error.message;
});
</script>
</head>
<body>
</body>
</html>
The problem: On chrome, edge beta (so basically chrome) and chrome on android, this code will succeed and print your devices latitude to the page. On Safari, safari for ios, and IE11, this will fail with the message "This site does not have permission to use the Geolocation API."
I assume it's not referring to the user granting permission to access location data, but i checked this anyway. Doesn't appear to be the case because it's working in one browser but not another on the same device. In my example, it works in chrome but not ie11 on the same windows 10 computer. I also had a coworker confirm the same thing, it works in chrome but not safari on his mac.
That leaves me thinking it's a domain issue, but why would it work in one browser and not another? After tons of Googling the best answer I can find is that it is an SSL issue, but if you go to https://developers.google.com/maps/documentation/javascript/geolocation you can see that even google.com is facing the same issue. So I think that rules that out. you can even try it on w3schools own site https://www.w3schools.com/html/html5_geolocation.asp
Google of course has no input here because navigator is a product of html5