响应式站点Owl Carousel导航仅在iPhone端被裁切问题咨询

问题说明 #

你遇到的是Owl Carousel在iOS Safari特有的渲染兼容问题，触发原因和对应解决方案如下：

触发原因 #

iOS Safari对overflow:hidden、CSS transform、绝对定位元素叠加的渲染逻辑和Chrome、安卓自带浏览器存在差异，旧版Owl Carousel本身也存在未适配iOS渲染规则的bug，就会出现导航元素被异常裁切的情况。

解决方案 #

• 优先升级Owl Carousel到最新稳定版，2.3.4及之前的版本普遍存在iOS端渲染裁切bug，升级后可直接覆盖修复大部分兼容问题
• 给Owl Carousel的根容器添加GPU加速样式，规避Safari的渲染bug：

.owl-carousel {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

• 调整容器溢出规则，如果你的导航按钮是定位在轮播可视区域外侧，把.owl-stage-outer的溢出规则设为可见，在外层再套一层容器控制全局溢出：

/* 原有控制轮播溢出的外层容器 */
.your-carousel-wrapper {
  overflow: hidden;
}
/* 修改轮播内部容器的溢出规则，避免裁切导航 */
.owl-carousel .owl-stage-outer {
  overflow: visible !important;
  position: relative;
}

• 检查页面viewport meta标签配置，确保没有遗漏适配移动端的参数：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 给轮播容器添加触摸行为规则，避免触摸操作触发异常重绘导致裁切：

.owl-carousel {
  touch-action: pan-y;
}

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