jQuery内容滚动器移动端异常：首条目后列表项无法显示

嘿，这个问题我之前帮不少开发者踩过坑，旧款iOS的Safari确实经常在这类动画交互上出点小状况。结合你描述的现象——桌面正常、移动端除首个条目外其余都被设为display: none，我梳理了几个最可能的原因和对应的解决方向：

1. CSS过渡与display属性的兼容性bug #

旧版iOS Safari对display属性切换和opacity淡入淡出的组合支持很差。很多轮播逻辑会先把所有元素设为display: none，再逐步显示当前元素，但Safari在处理这种逻辑时，可能会因为动画触发时机的问题，把后续元素永久锁定在display: none状态。

解决办法：
放弃用display控制显隐，改用visibility + opacity的组合配合CSS过渡：

.news-item {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  /* 可选：触发硬件加速，避免渲染异常 */
  transform: translateZ(0);
}

.news-item.hidden {
  opacity: 0;
  visibility: hidden;
  /* 可选：绝对定位避免占位 */
  position: absolute;
  top: 0;
  left: 0;
}

JS里只需要切换hidden类即可，不用碰display属性：

function switchNews(index) {
  // 先隐藏所有条目
  document.querySelectorAll('.news-item').forEach(item => {
    item.classList.add('hidden');
  });
  // 显示当前条目
  document.querySelectorAll('.news-item')[index].classList.remove('hidden');
}

2. JavaScript定时器的性能延迟 #

旧款iPhone的硬件性能有限，setInterval或setTimeout可能出现比预期更长的延迟，导致你的轮播逻辑没有按时触发后续条目的显示操作。如果你的代码逻辑是“先隐藏所有→显示当前”，一旦定时器延迟，后续的显示步骤可能没执行到位，就会出现元素一直隐藏的情况。

排查方向：

• 打开Chrome DevTools的iPhone6/7/8模拟环境，切换到Safari内核，查看控制台是否有JS报错；
• 把定时器的时间间隔稍微调大一点（比如从3000ms改成3500ms），给旧设备留足够的渲染时间；
• 避免在定时器里批量操作DOM，改成只操作上一个和当前需要显示的元素，减少DOM操作开销。

3. 未触发硬件加速导致的渲染异常 #

旧版iOS Safari对未开启硬件加速的元素，在处理连续动画时容易出现渲染异常，比如元素意外消失。

快速验证方法：
给新闻条目元素添加will-change: opacity或者transform: translateZ(0)，强制浏览器开启硬件加速，看看问题是否消失。

最后提醒下，你可以用Chrome DevTools的“性能”面板，在iPhone模拟环境下录制轮播过程的性能日志，看看是不是有长时间的任务阻塞了JS执行，导致后续的显隐逻辑没跑起来。

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