Javascript无法在ipad（在ios 13.7和ios 14.0上测试-在chrome，safari和firefox中测试）或iphone（在iphone SE ios 13.7上测试）上不起作用

Question

我想知道您是否可以帮助我？我正在尝试使用一段javascript在ios设备上工作。我在div的页面上有多个图像，然后单击，我想在一个信息面板上滑动（隐藏在左侧），一旦该面板滑入，如果单击该面板，我希望它滑回到左边。

这是我在所有桌面浏览器上都能正常运行但在ios上无能为力的代码-我无法理解，并且不确定如何在ios上测试或检查问题。

这里是小提琴：https://jsfiddle.net/adpLqbt2/31/

CSS

.box {
  display: inline-block;
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  }

.overlay-btn {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  height: 500px;
  width: 500px;
  z-index: 10;
  background: url('../img/icons/info.svg') 98% 98% no-repeat;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: -500px;
  width: 500px;
  margin: 0;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}


.over-show {
  left: 0;
  height: 500px;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

HTML

           <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="rah" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="yay" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="see" />
          </div>

JS

const triggers = document.getElementsByClassName('overlay-btn');
const triggerArray = Array.from(triggers).entries();
const panels = document.getElementsByClassName('overlay-content');
const infoButtons = document.getElementsByClassName('overlay-btn');

for (let [index, trigger] of triggerArray) {
  let triggerIndex = index;
  function togglePanel() {
    panels[triggerIndex].classList.toggle('over-show');
    infoButtons[triggerIndex].classList.toggle('js-fade');
  }
  trigger.addEventListener('click', togglePanel);
  infoButtons[triggerIndex].addEventListener('click', togglePanel);
}