Openlayers 2 show pink map (layer) by Iphone

Question

My goal is to track my current position by smartphone and show this on the map. For this I'm using openlayers 2.

But now I have the following problem. When I use the below code in a Chrome Browser ( Desktop, Android ) it works fine. If I open the same page in a iPhone ( Safari, Chrome ) I got always instead of the map just a pink layer with the position marker.

  <div id="mapdiv"></div>
  <script src="OpenLayers.js"></script>
  
  <script>
  
    map = new OpenLayers.Map("mapdiv");

    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
              .transform(
                new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
                map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
              );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
    
  </script> 

Can someone help me here?

Answer 1

It might be due to mixed content, OpenLayers 2 defaults to http for the OSM url, try specifying https

map.addLayer(new OpenLayers.Layer.OSM(
            "OpenStreetMap", [
                "https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
            ]
));