CSS属性在部分iPhone设备上不生效，轮播按钮位置异常求助

问题场景 #

我在开发网站时使用Flickity轮播组件，针对底部轮播的下一页按钮编写了以下CSS：

.footer-carousel .flickity-prev-next-button.next{
  transform: scale(1.35);
  top: 85% !important;
}

该设置在桌面端和多数手机上正常，按钮能显示在轮播底部85%的位置，但在部分iPhone设备上出现异常：

• 按钮初始被渲染在轮播顶部，即使调试工具显示CSS类和top:85% !important已激活，位置仍错误
• 点击按钮后，按钮下移至正确位置，但图片不切换，后续操作恢复正常
• 禁用top:85% !important后按钮完全移至底部，重新启用该属性，按钮又回到正确位置

解决方案 #

• 确认轮播容器的定位上下文
  Flickity的切换按钮默认是绝对定位，必须确保.footer-carousel容器设置了position: relative;，否则按钮会以更上层的相对定位元素为基准计算位置，iPhone浏览器在这部分的解析可能存在差异。补充以下CSS：

  .footer-carousel {
    position: relative;
  }
  

• 改用bottom属性替代top
  既然目标是将按钮放在底部区域，使用bottom属性能避免百分比计算在iPhone上的偏差，效果等同于top:85%：

  .footer-carousel .flickity-prev-next-button.next{
    transform: scale(1.35);
    top: auto !important; /* 覆盖原有top属性 */
    bottom: 15% !important;
  }
  

• 强制触发浏览器重绘
  部分iPhone浏览器存在渲染缓存问题，导致初始样式未正确应用。可以在轮播初始化完成后手动触发按钮重绘：

  const footerCarousel = new Flickity('.footer-carousel');
  footerCarousel.on('ready', function() {
    const nextBtn = document.querySelector('.footer-carousel .flickity-prev-next-button.next');
    nextBtn.classList.add('temp-repaint');
    void nextBtn.offsetWidth; // 触发重绘
    nextBtn.classList.remove('temp-repaint');
  });
  

  配合临时类的CSS（无需实际视觉变化）：

  .temp-repaint {
    opacity: 0.99;
  }
  

• 移除!important，提升选择器优先级
  !important可能干扰Flickity的内置样式逻辑，尤其是移动端浏览器。通过增加选择器层级提升优先级，替代!important：

  body .footer-carousel .flickity-prev-next-button.next{
    transform: scale(1.35);
    top: 85%;
  }
  

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