为何原生JS轮播组件在iOS Safari浏览器中无法正常工作？

你的轮播组件在iOS Safari中报错的核心原因是DOM还未完全加载时就执行了JS代码，导致document.querySelector(".slider")返回null，后续调用slider.lastElementChild自然触发类型错误。其他浏览器可能在DOM未完全就绪时仍能获取到元素，但Safari对DOM加载时机的处理更严格。

修复步骤 #

1. 确保JS在DOM加载完成后执行 #

有两种可靠方式：

• 方式一：将JS脚本移到HTML末尾
  把你的轮播JS代码放在</body>标签之前，确保所有DOM元素渲染完成后再执行：

<!-- 页面其他HTML内容 -->
        </div>
    </div>
    <script>
        // 这里放置轮播JS代码
    </script>
</body>
</html>

• 方式二：用DOMContentLoaded事件包裹初始化函数
  如果无法移动脚本位置，通过事件监听确保DOM就绪后再初始化轮播：

// Carousel
function slider() {
  // 原函数内容保持不变
}

// 等待DOM加载完成再执行初始化
document.addEventListener('DOMContentLoaded', slider);

2. 修复CSS拼写错误 #

你的CSS中存在拼写错误，会导致过渡效果异常：

/* 错误写法 */
.slide.active~.slide {
  transiiton: 250ms all;
}

/* 正确写法 */
.slide.active~.slide {
  transition: 250ms all;
}

3. 优化Safari兼容性细节（可选） #

虽然现代Safari已支持标准transform属性，但如果需要兼容旧版本，可以给箭头的transform添加-webkit前缀：

[class*="icono-arrow2"][class*="-left"] {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
[class*="icono-arrow2"][class*="-right"] {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

完整修复后的代码示例 #

HTML #

<div class="slider__wrapper">
    <div class="slider">
        <div class="slide active">
            <h1>Slide 1</h1>
        </div>
        <div class="slide">
            <h1>Slide 2</h1>
        </div>
        <div class="slide">
            <h1>Slide 3</h1>
        </div>
        <div class="slide">
            <h1>Slide 4</h1>
        </div>
    </div>
    <div class="slider_arrow_box">
        <div class="slider_arrow_wrapper">
            <i id="prev" class="btn icono-arrow2-left"></i>
        </div>
        <div class="slider_arrow_wrapper">
            <i id="next" class="btn icono-arrow2-right"></i>
        </div>
    </div>
</div>
<script>
// Carousel
function slider() {
  let slides = document.querySelectorAll(".slide"),
    slider = document.querySelector(".slider"),
    last = slider.lastElementChild,
    first = slider.firstElementChild,
    btn = document.querySelectorAll(".btn");

  slider.insertBefore(last, first);

  btn.forEach(btn => {
    btn.addEventListener("click", movement);
  });
  setInterval(function()
  {
      movement({target:{id:"next"}});
  }, 3000);
  function movement(e) {
    slider = document.querySelector(".slider");
    last = slider.lastElementChild;
    first = slider.firstElementChild;

    const activeSlide = document.querySelector(".active");

    if (e.target.id === "next") {
      slider.insertBefore(first, last.nextSibling);

      activeSlide.classList.remove("active");
      activeSlide.nextElementSibling.classList.add("active");
    } else {
      slider.insertBefore(last, first);
      activeSlide.classList.remove("active");
      activeSlide.previousElementSibling.classList.add("active");
    }
  }
}

document.addEventListener('DOMContentLoaded', slider);
</script>

CSS #

/* JS Carousel */
.slider {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 550px;
  margin: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.slide {
  opacity: 0;
  width: 100%;
  height: auto;
  position: absolute;
  text-align: center;
  -webkit-transition: 2s all;
  transition: 2s all;
}

.slide.active {
  opacity:1;
}

.slide.active~.slide {
  transition: 250ms all;
}
.slider__wrapper {
  position: relative;
}
.slider_arrow_box{
  position: absolute;
  bottom: 4%;
  left: 45%;
  padding: 3px;
}
.slider_arrow_wrapper {
  display: inline-block;
  margin: 0 15px;
  background: blue;
  padding: 7px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1.5px;
  opacity: .6;
}
.slider_arrow_wrapper:hover {
    opacity: 1;
}
[class*="icono-arrow2"] {
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  margin: 10px;
}
[class*="icono-arrow2"]:before {
  right: 0;
  top: -3px;
  position: absolute;
  height: 4px;
  box-shadow: inset 0 0 0 32px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 15px;
  transform-origin: right top;
}
[class*="icono"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  box-sizing: border-box;
}
[class*="icono"]:before,
[class*="icono"]:after {
  content: "";
  box-sizing: border-box;

}
[class*="icono-arrow2"][class*="-left"] {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
[class*="icono-arrow2"][class*="-right"] {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

内容的提问来源于stack exchange，提问作者Jeff W