Leaflet RubyonRails 6-传单-iPhone上未显示开放街道地图

我正在尝试在Rails 6应用程序上运行带有开放街道地图的传单
由于我已决定通过运行纱线添加传单添加传单.js，所以我不使用gem“传单轨道”
为了能够添加CSS部分，我最后添加了传单-快速入门指南中推荐的链接rel=“stylesheet”
该应用程序只需获取您的坐标，并在地图上用这些坐标放置一个标记。简单。
目前，一切正常，只有一个小问题。我在任何iPhone或iPad上都看不到地图。它将获取我的坐标，放置标记，但不显示地图。
我甚至不能在我的本地主机（Inspect Element-on mobile）上测试移动版本上的应用程序，在这里我可以允许访问，但这就是我所能做的，当我单击Log按钮时，它什么都不做。

我的档案如下

app/javascript/application.html.erb

app/javascript/custom.scss

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'leaflet'
import 'bootstrap'
import '../stylesheets/application'

if ("geolocation" in navigator) {
  console.log('geolocation is available');
  navigator.geolocation.getCurrentPosition(function(position) {     
    // initialize the map on the "map" div with a given center and zoom
    const map = L.map('trackmap').setView([0, 0], 1);       

    // Required by leaflet to use it
    const attribution = '&copy; <a href=""https://www.openstreetmap.org/"">OpenStreetMap</a> contributors | &copy; Trackmi ';
    const tileURL = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
    const tiles = L.tileLayer( tileURL , {attribution} );
    tiles.addTo(map);

    // Listen for click on Log button
    const log = document.getElementById('log');
    log.addEventListener('click', function (event) {

        alert("Button Clicked")

        const lat = position.coords.latitude
        const lon = position.coords.longitude
        document.getElementById('latitude').textContent = lat
        document.getElementById('longitude').textContent = lon

        // add marker to map with the coordinates
        var marker = L.marker([lat, lon]).addTo(map)

        // set the view to the lat, lon coordinates and zoom it.
        map.setView([lat, lon], 18)

    });
});
} else {
console.log('geolocation IS NOT available');
}

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

#trackmap {
  height: 400px;
  width: 600px;
}
.card {
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 20%;
  margin-bottom: 30%;
} 
.text-center {
  text-align: center !important;
  padding-top: 30px;
}
.ptitle {
  font-weight: bold;
}
#log {
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 1.2rem !important;
}  
@media (max-width: 576px) and (orientation : portrait) {
.card {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 20%;
}

您可以在此处查看/运行应用程序：。
你可以在你的桌面和手机（Android）上查看它，它应该可以正常工作。如果你有一部iPhone，或者试图在移动版本的桌面上测试它，那么它就不起作用了。
所以，我的问题是，在iPhone或iPad上显示地图需要做什么？

---

我想提前感谢您提供的帮助。

它在我的iPhone上运行良好，使用Safari和Chromeit在我的iPhone上运行良好，使用Safari和Chrome

<div class="card">
<div class="card-title text-center">
      <h1> Tracking Data </h1>
</div>
  <div class="card-body">

        <p class="coordinates ptitle">Your Location is

        <div>
            Latitude = <span id='latitude'></span>&deg;
        <br>
            Longitude = <span id='longitude'></span>&deg;
        </div>

    </p>
    <div class="centeButton text-center"> 

        <button id='log' type="button" class="btn btn-primary">Log</button>
    </div>
        <br>
        <div class="d-flex justify-content-center"">  
            <div id='trackmap'></div>
        </div>
  </div>

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

#trackmap {
  height: 400px;
  width: 600px;
}
.card {
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 20%;
  margin-bottom: 30%;
} 
.text-center {
  text-align: center !important;
  padding-top: 30px;
}
.ptitle {
  font-weight: bold;
}
#log {
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 1.2rem !important;
}  
@media (max-width: 576px) and (orientation : portrait) {
.card {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 20%;
}