Owl Carousel在Squarespace站点小屏及iPad端导致页面断裂问题求助

问题解决方案 #

以下修复步骤可解决页面断裂问题：

1. 删除CSS中强制覆盖的.owl-stage padding规则，避免和JS初始化的stagePadding参数重复导致宽度计算溢出：

/* 删掉该规则 */
.owl-stage {
  padding: 15px !important;
}

2. 删除CSS中.owl-item.active的margin强制设置规则，避免和Carousel自带的margin参数冲突导致总宽度计算错误：

/* 删掉该规则 */
.owl-item.active {
  margin: 0 !important;
}

3. 移除.uk-card-primary样式中的左右margin设置，统一使用Carousel初始化的margin参数控制卡片间距：

/* 修改前 */
.uk-card-primary {
  margin: 0 5px 5px 5px !important;
}
/* 修改后 */
.uk-card-primary {
  margin: 0 0 5px 0 !important;
}

4. 初始化Owl Carousel时增加autoWidth: false参数，强制关闭自动宽度计算，避免老版本的原生计算bug：

$('.owl-carousel').owlCarousel({
  loop:false,
  stagePadding: 15,
  margin:10,
  nav:true,
  autoWidth: false, // 新增该行
  navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
  responsive:{
      0:{
          items:2
      },
      640:{
          items:3
      },
      960:{
          items:4
      },
      1200:{
          items:5
      }
  }
})

5. 可选优化：将Owl Carousel版本从2.2.1升级到2.3.4，修复版本本身存在的响应式宽度计算缺陷。

原问题描述 #

我使用此Codepen代码为Squarespace平台客户站点开发功能，仅通过CSS做了大量自定义调整。

• 请访问指定客户测试页面核查问题，访问密码为mmmm1234
• 向下滚动页面，找到我实现滑块功能的「Discover Online Experiences」板块
• 在1280px宽度等小屏尺寸下浏览时，页面会发生断裂
• 该问题在iPad设备上表现尤为突出
• 当前仅放置4或5张卡片时，不会触发页面断裂问题
• 后续业务需要支持放置更多数量的卡片
• Squarespace的官方开发人员无法解决该问题，提出可能是Owl Carousel本身存在缺陷
• 恳请各位开发者协助排查解决，万分感谢！

以下是我在客户站点使用的CSS和JS代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" rel="stylesheet">

<style>
.uk-margin {
  padding: 0 !important;
  margin: 0 !important;
}
.uk-section {
  background-color: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.owl-carousel {
  position: relative;
  margin-top: 30px;
}
.owl-nav {
  position: absolute;
  top: -45px;
  right: 10px;
}
.uk-card-primary {
  border: none;
  border-radius: 0 0 13px 13px;
  background: none !important;
  background-color: none !important;
  color: none !important;
  margin: 0 5px 5px 5px !important;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%) !important;
  min-height: 114px !important;
}
.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px;
  min-height: 114px !important;
}
.owl-dots {
  margin-top: 0 !important;
}
.uk-card-title {
  margin: 0 0 15px 0 !important;
  color: black !important;
  font-size: 15px;
  line-height: 120%;
}
.crd-rate {
  margin: 0 !important;
  color: black !important;
  font-size: 13px;
  line-height: 120%;
}
#crd-rate {
  color: black !important;
  font-weight: 700 !important;
}
#dsc {
  margin: 0 0 15px 0 !important;
  color: #808080;
  font-size: .8em;
  line-height: 120%;
}
.uk-card-primary.uk-card-hover:hover {
  background-color: none !important;
  box-shadow: none !important;
  border: 1px solid #cecece;
}
.owl-stage {
  padding: 15px !important;
}
.uk-card-body {
  padding: 8px 10px 10px 10px !important;
}
.uk-link, a {
  color: inherit !important;
}

/*
----
Card Image
----
*/
.crd-img {
  padding: 5px 5px 0 5px; 
}
#crd-img {
  border-radius: 13px 13px 0 0; 
}

/*
----
Rate, Star, Reviews
----
*/
.d-flex1, .align-items-end1, .justify-content-between1 {
  text-align: left;
  word-wrap: break-word;
  box-sizing: border-box;
  margin: 0 !important;
}
.d-flex1 {
  display: flex !important;
}
.align-items-end1 {
  align-items: flex-start !important;
}
.justify-content-between1 {
  justify-content: flex-start !important;
}
#crd-rating, #crd-star, #crd-review {
  margin-right: 5px !important;
  font-size: 13px !important;
  color: black !important;
}
/*#crd-rating, #crd-review {
  margin-top: 2px !important;
}*/
#crd-rating {
  color: black !important;
  font-weight: 700 !important;
}
#crd-star {
  max-width: 20px !important;
  margin-top: -2px !important;
}
#crd-review {
  font-weight: 100 !important;
}

/*
----
Owl Carousel
----
*/
.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
    color: black;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #808080;
    text-decoration: none; }
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px; }
.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; }
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #a7a7a7;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #cecece; }
.owl-item.active {
  margin: 0 !important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<script>
  $('.owl-carousel').owlCarousel({
    loop:false,
  stagePadding: 15,
    margin:10,
    nav:true,
  navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
    responsive:{
        0:{
            items:2
        },
        640:{
            items:3
        },
      960:{
            items:4
        },
        1200:{
            items:5
        }
    }
})
</script>

故障截图：

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