iOSだと、ブラウザ位置情報の取得を行うとOpenLayersでの地図表示ができなくなる問題

program

iOSのブラウザだと、navigator.geolocation.watchPosition()の呼び出し後にOpenLayersで国土地理院地図を表示させようとしても、地図領域が真っ白（拡大・縮小アイコンは表示される）で何も表示されないという問題が起きた。
html例は以下。
原因は、このページをhttpsでアクセスする場所に置いているのに、国土地理院のurlをhttpで指定していたこと。
(位置情報取得にはhttpsアクセスが要求されるので必然的にページを配置するのはhttpsアクセスできるサーバになる)
「url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"」→「url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"」に変更することで、ブラウザ位置情報の取得を行っても、OpenLayersでの地図表示ができるようになった。

<!DOCTYPE html>

<html>
<head runat="server">
    <link rel="stylesheet" href="./ol.css" />
    <script src="./ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px; height:500px; border:solid 1px black;"></div>
    <div id="pos"></div>

<script>
window.onload=function(){
	// 位置情報を常に変数に格納し続ける
	navigator.geolocation.watchPosition(
		function (position) {
			currentLatitude = position.coords.latitude;
			currentLongitude = position.coords.longitude;
			document.querySelector("#pos").innerText = currentLatitude + " , " + currentLongitude;
		},
		function (error) { alert("位置情報の取得に失敗しました。サイト設定で位置情報へのアクセスを許可してください。\n( " + error.message + ")"); },
		{ "enableHighAccuracy": true, "timeout": 20000, "maximumAge": 0 }
	);

	// 地図表示
	var obMap = new ol.Map({
		target: 'map',
		view: new ol.View({ maxZoom: 16 })
	});

	var obTileLayer = new ol.layer.Tile({
		source: new ol.source.XYZ({
			url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", // ●ページがhttpsでアクセスされているのに、ここがhttpなのが問題
			projection: "EPSG:3857"
		})
	});
	obMap.addLayer(obTileLayer);

	obMap.getView().setCenter(ol.proj.fromLonLat([132.7533995, 34.5698292]));
	obMap.getView().setZoom(9);
};
</script>

</body>
</html>


そうは言っても、ページをhttpsでアクセスする場所に置いた状態で国土地理院のurlをhttpで指定するだけなら、ちゃんと地図は表示されていた。
なぜ位置情報の取得をすると突然表示できなくなるのか……。